Запрос вопрос покадровой анимации

Question

Я пишу некоторые примеры с RequestAnimationFrame и Canvas:

var ctx; 
var x=0,y=0,v_x=5,v_y=5; 
window.addEventListener('load',init); 
window.requestAnimationFrame = (function(){ 
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    function(f){ 
     window.setTimeout(f,1000/60); 
    } 
})(); 
function init(){ 
    ctx = document.getElementById("canvas").getContext("2d"); 
    draw(); 
} 
function draw(){ 
    ctx.beginPath(); 
    ctx.rect(0,0,50,50); 
    ctx.closePath(); 
    ctx.fill(); 
    x += v_x; 
    y += v_y; 
    requestAnimationFrame(draw); 
} 

Проблема заключается в том, что я хочу, чтобы Rect(), чтобы идти по диагонали вниз с переменными v_x и v_y и requestAnimationFrame, то я получаю Rectangle полностью нарисован, но он не движется!

Answer 1

Потому что вам необходимо установить положение прямоугольника x и y кроме 0,0. Так что измените это ctx.rect(0,0,50,50), на этот ctx.rect(x,y,50,50). Наряду с этим, вы хотите, чтобы очистить холст, прежде чем перекраивать:

function draw(){ 
    ctx.clearRect(0,0,width,height); // Clears the canvas 
    ctx.beginPath(); 
    ctx.rect(x,y,50,50);    // Sets the rects pos to be x,y 
    ctx.closePath(); 
    ctx.fill(); 
    x += v_x; 
    y += v_y; 
    requestAnimationFrame(draw); 
} 

Fiddle Example