画布旋转无法正常工作

我有麻烦试图通过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/

任何澄清是真的欢迎！

来源

2013-03-23 YemSalat

你在你的语法错误：G.rotate应该G.ctx.rotate。 – Fede 2013-03-23 20:38:17

干杯，固定的，但仍然不起作用 – YemSalat 2013-03-23 20:41:42

这是绘画，它只是在屏幕之外。让您的画布更大：http://jsfiddle.net/QHRkR/1/ – Xymostech 2013-03-23 20:44:55

我想通了。

只要我将画布转换为矩形的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();

来源

2013-03-23 20:45:43 YemSalat

画布旋转无法正常工作

回答

相关问题