0

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

蓝色方块应该移动和旋转，但事实并非如此。请帮忙。

  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);
    };

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

4

1 回答 1

3

这是尝试的一种方法

问题是您没有保存和恢复上下文。发生的事情是你翻译所以你说 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 的方式，但是肯定有更好的方法来组织渲染方法。

这是我使用注意的方法，代码较旧，但以下仍然相关。

// 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();
于 2014-05-22T17:02:31.120 回答