javascript - キャンバスの回転が正しく機能しない

Question

JavascriptCanvasAPIを介して長方形を回転させようとして問題が発生しました。

コードは次のとおりです。

G = {};
// get canvas context
G.ctx = document.getElementById('canvas').getContext('2d');

var x = 200;
var y = 100;
var w = 30;
var h = 70;

G.ctx.fillRect(x, y, w, h);

// Why is this not working??
G.ctx.save();
G.ctx.translate(x, y);
G.ctx.rotate(30*(Math.PI/180));
G.ctx.fillRect(x, y, w, h);
G.ctx.restore();

コードは、何らかの理由で最初の長方形のみを描画します。

これがJSfiddleです：http：//jsfiddle.net/5YZbd/1/

どんな説明でも大歓迎です！

Answer 1

私はそれを考え出した。

キャンバスを四角形の x/y に変換するとすぐに、その位置は 0/0 として参照される必要があります。これは、変換後のキャンバスの原点が原因です。

作業コードは次のとおりです。

G.ctx.save();
G.ctx.translate(x, y);
G.ctx.rotate(30*(Math.PI/180));
G.ctx.fillRect(0, 0, w, h);
G.ctx.restore();