画布旋转无法正常工作答案

【问题标题】：Canvas rotation doesn't work properly画布旋转无法正常工作
【发布时间】：2013-03-13 13:44:42
【问题描述】：

我在尝试通过 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/

非常欢迎任何澄清！

【问题讨论】：

你的语法有错误：G.rotate 应该是 G.ctx.rotate。
干杯，已修复，但仍然无法正常工作
它在画，它就在屏幕外。让你的画布更大：jsfiddle.net/QHRkR/1

标签： javascript canvas rotation html5-canvas

【解决方案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();

【讨论】：