下面代码canvasrotate旋转旋转的坐标点在哪，为什么不在元素的中心点？_html/css_W

下面代码 canvas rotate旋转 旋转的坐标点在哪，为什么不在元素的中心点？

=================================





无标题文档




function init()
{
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.strokeStyle = "red";
cxt.strokeRect(300,300,100,100);
cxt.strokeStyle = "blue";
cxt.rotate(10*Math.PI/180);
cxt.strokeRect(300,300,100,100);
cxt.strokeStyle = "green";
cxt.rotate(20*Math.PI/180);
cxt.strokeRect(300,300,100,100);
}

回复讨论(解决方案)

canvas旋转其实就是画布的旋转，旋转中心点是画布原点，即0,0点。
如果想中心旋转的话设置画布原点即可。

function init() {	 var canvas = document.getElementById('canvas');	 var cxt = canvas.getContext('2d');	 cxt.strokeStyle = "red";	 cxt.strokeRect(0,0,100,100);	 cxt.strokeStyle = "blue";	 cxt.rotate(10*Math.PI/180);	 cxt.strokeRect(0,0,100,100);	 cxt.strokeStyle = "green";	 cxt.rotate(20*Math.PI/180);	 cxt.strokeRect(0,0,100,100);	 cxt.rotate(-30*Math.PI/180);//将画布旋转恢复到初始状态	 cxt.translate(50,50);//将画布原点移动到旋转对象的中心位置	 cxt.rotate(45*Math.PI/180);//旋转画布	 cxt.translate(-50,-50);//将画布原点恢复到初始状态	 cxt.strokeStyle = "yellow";	 cxt.strokeRect(0,0,100,100); } 

查看更多关于下面代码canvasrotate旋转旋转的坐标点在哪，为什么不在元素的中心点？_html/css_W的详细内容...