Холст Animate Clipping Mask Path

Question

Я хочу (я достиг 1-3):

1. захватить изображение со страницы
2. добавить его в холст элемент
3. клип изображение на маске
4. движение (одушевленные) маска вокруг изображения

Я выполнил первые 3, но не могу понять, как переместить маску .. Пожалуйста, помогите!

// get the canvas 
var canvas = document.getElementById('c'); 
var context = canvas.getContext('2d'); 

// get a div from the page 
var stuff = document.getElementsByName('testElem')[0]; 

// add a class to the div 
stuff.setAttribute('class', 'pleaseWork'); 
var newImage = new Image(); 

// get the background image of the div 
var bgClass = document.getElementsByClassName('pleaseWork')[0].style.backgroundImage; 

    var x = canvas.width/2; 
    var y = canvas.height/2; 
    var radius = 75; 
    var offset = 50; 

    // clip the context to create a circular clipping mask 
    context.save(); 
    context.beginPath(); 
    context.arc(x, y, radius, 0, 2 * Math.PI, false); 
    context.clip(); 

// on load put the image into the clipping mask 
newImage.onload = function() { 
    context.drawImage(newImage,0,0); 
} 

// put the background image from the div into the canvas (without the url()) 
newImage.src = bgClass.replace(/^url|[\(\)]/g, ''); 

Как можно переместить (одушевленные) вырезанную маску из холста, чтобы показать различные части изображения обрезается?

Спасибо за любые идеи!

Answer 1

Вы можете поместить свой клип + код рисования в функцию и вызвать эту функцию внутри цикла анимации:

Пример кода и демо: http://jsfiddle.net/m1erickson/07mzbat9/

Рисунок Функция:

function draw(){ 

    // clear the canvas 
    ctx.clearRect(0,0,cw,ch); 

    // save the unclipped context 
    ctx.save(); 

    // draw a circular path 
    ctx.beginPath(); 
    ctx.arc(cx,cy,radius,0,PI2); 
    ctx.closePath(); 
    ctx.stroke(); 

    // create a clipping path from the circular path 
    // use the clipping path to restrict drawing 
    ctx.clip(); 
    ctx.drawImage(img,0,0); 

    // restore the unclipped context (to remove clip) 
    ctx.restore(); 
} 

Анимация петля:

var cw=canvas.width; 
var ch=canvas.height; 
var cx=50; 
var cy=50; 
var radius=35; 
var PI2=Math.PI*2; 

// animate the mask across the canvas 
function animate(time){ 
    if(cx-radius>cw || cy-radius>ch){return;} 
    requestAnimationFrame(animate); 
    cx+=0.2; 
    cy+=0.2; 
    draw(); 
}