rotate(angle)

旋转坐标系angle弧度

  ctx.rotate(angle)

参数

angle Number 要旋转的弧度值,正值顺时针旋转,负值逆时针旋转

测验

画一条水平线,(50,25)(130,25),旋转画布45度后,计算其坐标.计算公式如下:

x = x*cos(A) - y*sin(A) , y = y*cos(A) + x*sin(A)

旋转坐标45度(Math.PI/4)后,再画这条线.继续再转30度,再画(红色线)

可以看到,每次调用rotate(angle),都是基于之前旋转后叠加的.这个例子,先转45度,画线后,对于未转前,有45度的倾斜

再转30度后,相到于原画布转了45+30=75度,发现线(红色线)再度倾斜了,但线未完全画出,只有一部分

画布顺时针转动了75度,并且是以原点为心转动的,此时画布的一部分已经转到左侧去了,不在canvas元素范围内了.

所以只看到一部分的红色线

参数为负值时,逆时针转动

简化坐标

活用这个功能,可以大幅减少复杂的坐标计算.主要是基于角度变化时坐标需要重新计算.

默认是绕(0,0)点转动,可以配合translate()一起使用达到简化坐标计算目的

车轮辐辏可以用旋转坐标简化画法,将原点置于车轮圆心,每画一轴旋转一次.画轴线固定为(0,0)(70,0)

如果不用此法,需要计算每轴点坐标.需要使用三角函数,这个代码就多一些了