Canvas的旋转操作（十三）

旋转函数
 

context.rotate(x)
参数x为旋转度，比如旋转45度，则x=Math.PI/4,使用弧度旋转制，注意，这里是以Canvas的原点为旋转点的！！！

下面我们就来试一下这个函数，我们想画一个中心点在（200,200），长宽均为100的正方形顺时针旋转45度的图形；

代码如下

效果图

你会发现这不是你想要的！其实,同平移和缩放，这个旋转也是针对整个Canvas画布的，而且是以画布以原点顺时针旋转Math.PI/4的弧度，因此就出现上面的状况了！！！

 

所以你如果只想旋转某个图形，单单上面的操作是不行的！！！所以下面就一代码来绘制我们想要的旋转图形！！！

我们想画一个中心点在（200,200），长宽均为100的正方形顺时针旋转45度的图形；

经计算，最后的图形的中心点在（200,200）,因此我们可以先平移原点，再旋转平移后的原点就可以轻松的得到我们想要的图形了！！！

代码如下：
 

context.translate(200,200);
context.rotate(Math.PI/4);
context.fillRect(-50,-50,100,100);

效果图：