キャンバスでのアニメーションの速度が遅い

Question

私はキャンバスに新しいです.js.please thisに移動して、ボックスの動きを遅くしてください。 私はボックスをx軸とy軸の配列値に従って動かしてみたいと思っています。これは動作していますが速度は遅いです。スピードを落とし、軸を拡大する必要があります。私。このループ

<canvas width="2500" height="1500"></canvas> 
     body{ background-color: ivory; } 
     #canvas{border:1px solid red; margin:0 auto; } 

var canvas = document.getElementsByTagName("canvas")[0]; //get the canvas dom object 
var ctx=canvas.getContext("2d"); 
var cw=canvas.width; 
var ch=canvas.height; 

// define a rect using a javascript object 
var rect1={ 
    x:20, 
    y:20, 
    width:40, 
    height:40, 

} 

var xval=[1,2,3,4,5]; 
var yval=[1,2,3,4,5]; 


// start the animation loop 
requestAnimationFrame(animate); 
//setInterval(requestAnimationFrame, 100); 
function animate(time){ 


    for(var i=0;i<xval.length;i++){ 
    rect1.x+=xval[i]; 
    rect1.y+=yval[i]; 
    } 


    // draw the rects in their new positions 
    //setInterval(draw, 1000); 
    draw(); 

    // request another frame in the animation loop 
    requestAnimationFrame(animate); 
} 

function draw(){ 
    ctx.clearRect(0,0,cw,ch); 

    var r=rect1; 
    ctx.strokeRect(r.x,r.y,r.width,r.height); 

} 

Answer 1

var current; 
function animate(i=0){ 
clearInterval(current); 
current=setInterval(move(i),100);//moves with 0.1 seconds per frame 
if(i<xval.length-1){ 
setTimeout(animate(i+1),1000);//next speed in 1 second 
} 
} 
function move(i){ 
scale=1;//change to your needs 
rect1.x+=xval[i]×scale;//xval[i] is a speed 
rect1.y+=yval[i]×scale; 
draw(); 
} 
//start 
animate(); 

は、XVALアレイトラフXVALピクセル/ 0.1秒の速度で移動し、1秒後に次XVALに進みます。 あなたの間違いは：

for(var i=0;i<xval.length;i++){ rect1.x+=xval[i]; rect1.y+=yval[i]; } 

これは合算し、すべてのXVAL値（RECT = RECT + 1 + 2 + 3 + 4 + 5）の位置には、ので、あなたのRECTは、15ピクセルの速度を持っている、として移動させ、可能な限り速く（requestAnimationフレーム）。これはあなたが望むものではありません...

あなたのrequestAnimationフレームの使い方が間違っています（setInterval（requestAnimationFrame、1000）はナンセンスです）。

function draw(){ 
draw(); 
} //runs very fast, but may overload the computer 

function draw(){ 
requestAnimationFrame(draw); 
}//runs as fast as the computer can 

しかし、あなたの場合にはrequestAnimationフレームを使用しても意味がありません：それは、無料のレンダリング時間があるときに渡された関数を呼び出します。いくつかの3Dのものやsthを同様に重いものをレンダリングするときに使用してください。