ゲームの回転
赤い四角は回転できます：
回転コンポーネント
このチュートリアルの前半部分では、赤い四角がゲームエリア上で移動できますが、回転または回転できませんでした。
コンポーネントを回転するには、コンポーネントの描画方法を変更する必要があります。
キャンバス要素が利用できる唯一の回転メソッドは、全体のキャンバスを回転します：
キャンバス上に描画する他のすべての内容も回転され、特定のコンポーネントだけでなく回転されます。
そのため、 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();
}
