canvas绘制“海上升明月”

核心内容

1.海浪绘制

海浪的形状有点像正弦函数，可以用canvas提供的三次贝赛尔曲线函数bezierCurveTo(x1,y1,x2,y2,x3,y3)

http://www.w3school.com.cn/tags/canvas_beziercurveto.asp

无论是arcTo还是二次贝赛尔曲线quadraticCurveTo，所谓的控制点就是切线的交点。海浪的动态效果通过改变控制点的纵坐标实现的。

2.升月绘制

升月包括两个部分：弯月和升起动画。

升起动画比较简单，改变弯月坐标，横坐标：radius * Math.cos(deg)，纵坐标：radius * Math.sin(deg)。

弯月在于先用arc函数画外弧，再用arcTo画内弧，画内弧的时候需要选取弧外任意一点做控制点，然后通过相似三角形算出内弧半径即可。同时填充颜色。

源代码