Question

我需要使用canvas在rect内移动方块。所以我读了一些关于画布的帖子并制作了一些画布。然后我在一个大矩形中放了一个蓝色小方块。

蓝色方块应该移动和旋转，但不是。请帮忙。

  movingSquare.rotate = function() {
    var x = this.x;
    var y = this.y;
    context.translate(x + 10, y + 10);
    context.rotate((Math.PI / 180) * 45);
    context.translate(-x - 10, -y - 10);
    };

这是我的傻瓜http://plnkr.co/edit/dKy8qxaZu9BOzlLUWIam?p=info

Answer 1

Here is one way to try

问题是您没有保存并恢复上下文。你翻译的是什么，你说x和y是我需要绘制的地方，然后你将它旋转45度，下一次转换它再转换为x和y，并将它旋转45度再次所以现在旋转了90度，它将一直持续下去。

this.drawRotated = function(color){
    x = this.x;
    y = this.y;
    context.save();
    context.translate(x, y);
    context.rotate((Math.PI / 180) * 45);
    context.fillStyle = color;
    context.fillRect(0, 0, this.width, this.height);
    context.restore();
};

这就是我使用你的plunker的方法，但是肯定有更好的方法来组织渲染方法。

Here is the approach I use请注意，代码较旧，但以下内容仍然相关。

// save the context
ctx.save();
// translate it to the boxes x and boxes y, basically your taking the canvas and moving it to each box.
ctx.translate(box.x, box.y);
// now rotate it
ctx.rotate(box.angle);
// -5 is half of the box width and height 0,0 is the boxes location, im drawing it at half the width and height to set the rotation origin to the center of the box.
ctx.fillRect(-5,-5, 10,10); 
// now restore
ctx.restore();

如何旋转移动画布对象？

1 个答案: