风车——ctx.rotate(angle),ctx.translate(dx, dy)

以前见过这样的动画，一直想自己做一个，今天做了。

这个动画里有一个点是ctx.rotate，用这个函数可以旋转画布，我一开始误会了，以为只是将当前画面旋转一下，结果做出来的东西很诡异，一会正转一会反转，折腾了好久才发现原来rotate是旋转坐标轴的表示：有A点在（x， y），rotate后A的坐标还是（x， y），但在屏幕上是（x， y）转动了一个角度的（x‘， y’），而且这种变换会累加，下次rotate时的角度是基于本次角度的叠加。

ctx.translate(dx, dy)是一个想当好理解的API了，它把（dx， dy）做为新的（0， 0）点，与rotate一样，重复使用效果叠加。

这次还用到了两个有意思的API：渐变，分为线性的和圆周的，

1.  用var g = ctx.createLinearGradient(x0, y0, x1, y1)创建线性渐变

2. 用var g = ctx.createRadiaGradient(x0, y0, r0, x1, y1, r1)创建圆周的渐变

3.用g.addColorStop(x, color) 0 <= x <= 1，x指起点到终点为单位长度时的一条等高线。

	
		
		
		
	
	
		click me!