紅色方形可旋轉：
旋轉部件
在本教程早些時候，紅色正方形能走動的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();
}
試一試»