canvas的rotate属性旋转原点探究

canvas中绘制的图片旋转原点是画布的左上角，而不是绘制图形的左上角。

未旋转时

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(0*Math.PI/180);
ctx.fillRect(50,20,100,50);
</script>

 

顺时针旋转45度

ctx.rotate(45*Math.PI/180);

从图片中看得出来是绘制的图形以canvas画布原点进行旋转的