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

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

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

 nbsp;html>
 
 

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

回复讨论(解决方案)

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