赤い四角は回転できます：
このチュートリアルの前半では、赤い四角形はゲームエリアで動き回っていましたが、向きを変えたり回転したりすることはできませんでした。
コンポーネントを回転するには、コンポーネントを描画する方法を変更する必要があります。
canvas 要素で使用できる唯一の回転方法は、キャンバス全体を回転させることです：
特定のコンポーネントだけでなく、キャンバスに描画するすべてのものが回転します。
そのため、update() メソッドに多少の変更を加える必要があります：
まず、現在のキャンバス・コンテキスト・オブジェクトを保存します：
ctx.save();
次に、translate メソッドを使用して、キャンバス全体を指定のコンポーネントの中心に移動します：
ctx.translate(x, y);
次に、rotate() メソッドを使用して回転します：
ctx.rotate(angle);
これでキャンバスにコンポーネントを描画する準備が整いましたが、ここでは変形された（および回転した）キャンバスの 中心位置 0,0 に描画します：
ctx.fillRect(width / -2, height / -2, width, height);
終了したら、restore メソッドを使用して、コンテキスト・オブジェクトを保存された位置に復元する必要があります：
ctx.restore();
コンポーネントは回転されたただ一つのものです：
component コンストラクタには、angle という新しいプロパティがあり、
これは、コンポーネントの角度をラジアンで表したものです。
component コンストラクタの update メソッドは、
コンポーネントを描画するもので、ここでは、コンポーネントの回転を可能にする変更を確認できます：
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();
}
Try it Yourself »