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>

运行结果如下

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.