Question

我知道我可以使用＆＃34; translate-rotate-translate back-fillrect＆＃34;旋转一个矩形的程序。

但是，如果我想同时旋转它们并使用timeinterval（）使它们每秒自动旋转怎么办？

我每次尝试绘制时都试图保存和恢复，但它没有用。

Answer 1

您似乎走在了正确的轨道上！

保存
翻译（rectX，rectY）
旋转
fillRect（-rectWidth / 2，-rectHeight / 2，rectWidth，rectHeight）//绘制矩形w /居中旋转
恢复

适用于多个矩形

如果你定义一些这样的矩形对象：

var rects=[];
rects.push({x:50,y:50,w:50,h:35,color:'green',angle:0});
rects.push({x:150,y:120,w:30,h:20,color:'blue',angle:0});

然后你可以将它们放在这样的动画帧中：

requestAnimationFrame(animate);

function animate(time){
    // call for another loop in the animation
    requestAnimationFrame(animate);

    // clear canvas and redraw all rects
    ctx.clearRect(0,0,cw,ch);
    for(var i=0;i<rects.length;i++){
        // draw this rect at its specified angle
        var rect=rects[i];
        ctx.save();
        ctx.translate(rect.x+rect.w/2,rect.y+rect.h/2);
        ctx.rotate(rect.angle);
        ctx.fillStyle=rect.color;
        ctx.fillRect(-rect.w/2,-rect.h/2,rect.w,rect.h);
        ctx.restore();

        // increase this rect's angle for next time
        rect.angle+=(Math.PI*2)/60;
    }
}

requestAnimationFrame以大约60fps的速度循环，所以如果你将每个循环中的矩形角度增加（Math.PI * 2）/ 60，你将每秒旋转一个整数圈。

示例代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var rects=[];
rects.push({x:50,y:50,w:50,h:35,color:'green',angle:0});
rects.push({x:150,y:120,w:30,h:20,color:'blue',angle:0});

requestAnimationFrame(animate);

function animate(time){
  // call for another loop in the animation
  requestAnimationFrame(animate);

  // clear canvas and redraw all rects
  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<rects.length;i++){
    // draw this rect at its specified angle
    var rect=rects[i];
    ctx.save();
    ctx.translate(rect.x+rect.w/2,rect.y+rect.h/2);
    ctx.rotate(rect.angle);
    ctx.fillStyle=rect.color;
    ctx.fillRect(-rect.w/2,-rect.h/2,rect.w,rect.h);
    // orientation symbol
    ctx.fillStyle='red';
    ctx.fillRect(-rect.w/2,-rect.h/2,5,5)
    ctx.restore();

    // increase this rect's angle for next time
    rect.angle+=(Math.PI*2)/60;
  }
}

function drawRect(rect){
  ctx.save();
  ctx.translate(rect.x+rect.w/2,rect.y+rect.h/2);
  ctx.rotate(rect.angle);
  ctx.fillStyle=rect.color;
  ctx.fillRect(-rect.w/2,-rect.h/2,rect.w,rect.h);
  ctx.restore();
  rect.angle+=deltaAngle;
}

＆＃13;

body{ background-color: ivory; }
canvas{border:1px solid red;}

＆＃13;

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

＆＃13;

如何同时在画布中旋转2个矩形？

1 个答案: