как медленно анимация в холсте

Question

Я новичок в canvas.js.please помогите мне до this, чтобы замедлить движение коробки. Я хотел бы попробовать окно для перемещения в соответствии с значениями массива оси оси и оси 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с и переходит к следующему xval через 1 секунду. Ваша ошибка:

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

Это добавляет все ваши ценности xval (Прямоугольник = Прямоугольник + 1 + 2 + 3 + 4 + 5) в положение, так что ваш Прямоугольник имеет скорость 15px, и перемещается в как можно скорее (requestAnimation frame). Это не то, что вы хотели ...

Кстати, ваше использование requestAnimation frame неверно (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 аналогично тяжелого ...