javascript - 画布旋转无法正常工作

Question

我在尝试通过 JavascriptCanvas API 旋转矩形时遇到问题。

这是代码：

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();