【绘制】HTML5 Canvas绘画画板小项目——交互式旋转多边形（带角度盘）

介绍

这次的绘画画板小项目是一个可以交互式控制旋转的多边形，具体效果如图所示。

在线演示  详细代码

首先通过预设的属性在画板上通过鼠标绘制多边形，然后进入“控制”模式，点选多边形，可旋转到任意角度。

代码讲解 

忽略之前讲解的重复知识点。

这个小项目的难点在于：如何根据鼠标的移动旋转相应的角度。

这里其实用到了反正切函数arctan，在js中表示为Math.atan(直角边1/直角边2);

如果tanA=1/2；那么A=arctan0.5；

同理tanB=2/1；那么B=arctan2；

这样就能以多边形圆心和鼠标位置的连线作为斜边构造直角三角形，通过反三角函数求出相应的角度，重绘图形得出当前帧图像。