红色方形可旋转：
旋转部件
在本教程早些时候，红色正方形能走动的gamearea，但它不能转动或旋转。
要旋转组件，我们必须改变我们绘制组件的方式。
可用于canvas元素的唯一旋转方法将旋转整个画布：
一切你在画布上画也将被转动，不但特定组件。
这就是为什么我们必须做出的一些改变update()方法：
首先，我们保存当前画布上下文对象：
ctx.save();
然后，我们整个画布特定组件的中心，使用翻译方法：
ctx.translate(x, y);
然后，我们使用进行通缉旋转rotate()方法：
ctx.rotate( angle );
现在，我们已经准备好绘制组件到画布上，但现在它在翻译上的位置0,0中心的地位，我们将绘制(and rotated)帆布：
ctx.fillRect(width / -2, height / -2, width, height);
当我们完成后，我们必须将上下文对象恢复到其保存的位置，使用还原方法：
ctx.restore();
该组件是旋转的唯一的事情：
组件构造
所述component构造有一个称为新属性格式angle ，这是表示该组件的角弧度数。
该update的方法component构造函数是被我们绘制的组件，在这里你可以看到的变化，将允许元件旋转：
例
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.angle += 1 *
Math.PI / 180;
myGamePiece.update();
}
试一试»