画布旋转不能正常工作

Canvas rotation doesn't work properly

本文关键字：常工作 工作 不能 旋转 布旋转      更新时间：2023-09-26

我在尝试通过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();

由于某种原因，代码只绘制第一个矩形。

这是jsfield: http://jsfiddle.net/5YZbd/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();
相关文章：