Question

我是画布的新手，我想改变围绕圆圈移动红色矩形的速度，因为它目前正在缓慢移动（60fps）并且我已经尝试过setTimeout但是对我来说没有用。任何人都可以帮助以更快的速度移动红色矩形。

 var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

       
       
        var cx=30;
        var cy=30;
        var rectWidth=10;
        var rectHeight=2;
        var rotation= 0;
        requestAnimationFrame(animate);
        function animate(){
        requestAnimationFrame(animate);
      ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(cx,cy,10,0,Math.PI*2);
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 5;       
        ctx.stroke();
        ctx.save();
        ctx.translate(cx,cy);
        ctx.rotate(rotation);
        ctx.strokeStyle= "red";
        ctx.strokeRect(-rectWidth/4+20,-rectHeight/2,rectWidth,rectHeight);
        ctx.restore();

        rotation+=Math.PI/180;
              
        }

 <canvas id="canvas" width="60" height="60"></canvas>

Answer 1

在TripFinder#suitable_trips函数中，您具有传递给rotate()方法的角度animate。

旋转的角度越多，获得的速度越快。

以下是矩形以更高速度移动的代码段:(请注意，我更改了rotation的值）

＆＃13;

rotation

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cx=30;
var cy=30;
var rectWidth=10;
var rectHeight=2;
var rotation= 0;
requestAnimationFrame(animate);
function animate(){
    requestAnimationFrame(animate);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(cx,cy,10,0,Math.PI*2);
    ctx.closePath();
    ctx.fill();
    ctx.lineWidth = 5;       
    ctx.stroke();
    ctx.save();
    ctx.translate(cx,cy);
    ctx.rotate(rotation);
    ctx.strokeStyle= "red";
    ctx.strokeRect(-rectWidth/4+20,-rectHeight/2,rectWidth,rectHeight);
    ctx.restore();
    rotation+=Math.PI/180 * 15;                
}

＆＃13;

提高在画布中围绕圆圈移动的速度

1 个答案: