← Canvas 缩放 scale() Canvas 变形 transform() →

Canvas 旋转 rotate()

旋转 ( rotate ) 就是将图形围绕一个中心点(0,0)，顺时针或者逆时针旋转一定的弧度 ( angle )

但是，Canvas 中的旋转 ( rotate ) 针对的不是绘制的图形，而是针对画布本身

画布旋转了，带来最直接的结果是什么呢？就是某个点与屏幕上边之间的夹角改变了

我们看一个正常情况下的笛卡尔坐标体系，某个点(50,50) 与屏幕上边和 X 轴正方向之间的夹角都是 45 度

绿色的是屏幕

灰色的是画布

当我们画布顺时针旋转 30 度后，就变成了下图这样了

点还是那个点，点与画布之间的夹角还是 45°，但点与屏幕间的夹角已经变成了 75°

最直观的感受是啥？就是点往左下移了那么一点点，我们去掉各种辅助线，大家看看

一个点已经是这样了，如果我们画的是一个图形，那么图形上的所有点都移动了，那么直观看起来，就是图形旋转了

Canvas rotate()

ctx.rotate() 将 canvas 围绕屏幕左上角(0,0) 顺时针旋转一定角度

角度变量表示一个顺时针旋转角度并且用弧度表示

注意： 是顺时针，也就是，顺时针就是往下旋转，为什么没有逆时针呢？用 360° - 逆时针角度 = 顺时针角度了

语法

void ctx.rotate(angle);

参数	说明
angle	顺时针旋转的弧度。可以通过角度值计算：`degree * Math.PI / 180`

弧度 angle

我们特别说明下 angle 这个参数，它是一个弧度

如果我们要顺时针旋转 30°，那么

angle = 30 * Math.PI / 180

如果想要逆时针旋转 30° 怎么办呢？逆时针旋转 30°，其实就是顺时针旋转 -30°，也就是

angle = 360 + ( -30 * Math.PI / 180 )

怎么来的呢？看下图，哦，对了，先要知道圆的一周是 360° ，也是 2 * Math.PI

然后要理解什么呢？就是从外观来看，旋转 360° ， 360° x 2 = 720°，360° x 3 = 1080°

它们的直观感受是一样的，为什么呢？

大家可以自己转圈圈，看看转一圈，两圈，三圈，是不是还回到了原来的地方

所以如果说要旋转 3530°，那他实际上是旋转了多少度呢

3530° % 360 = 290°

它转了几圈呢

3530° / 360 = 9.8 = 9

从设计几何学和工程学上来说，它转了多少圈不重要，它转了多少度才是最重要的

范例

下面的范例先在点 (50,50) 绘制一个橘黄色的 100x50 的矩形，然后顺时针旋转画布 30°

最后在点 (50,50) 绘制一个 100x50 的绿色矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.fillStyle="orange";
ctx.fillRect(50,50,100,50);
ctx.rotate(30 * Math.PI / 180);
ctx.fillStyle="green";
ctx.fillRect(50,50,100,50);
</script>

运行结果如下

范例 2

我们利用多次旋转画一个折扇图

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="400" height="00">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
var colors = ['#D0021B','#F5A623','#8B572A','#417505','#9013FE','#000000']
for ( var i = 0; i < colors.length; i++ )
{
    ctx.fillStyle = colors[i];
    ctx.fillRect(0,0,200,50);
    ctx.rotate(15 * Math.PI / 180);
}
</script>