下面代码 canvas rotate旋转 旋转的坐标点在哪,为什么不在元素的中心点?
=================================
nbsp;html>
回复讨论(解决方案)
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); }