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

因为您需要将rectange的位置设置为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

请求动画帧问题

1 个答案: