Canvas如何做款祝福月饼【中秋特别版】

Canvas如何做款祝福月饼【中秋特别版】

　　华夏至物月饼,小厂月饼,月饼用量中秋将至，本期借此机会创作了一款祝福月饼的canvas动画，送给大家，祝大家阖家团圆，心想事成~

　　接下来就会教大家用Canvas api，且不用任何引擎和插件来制作这款祝福月饼。我们从基础结构，月饼绘制，打字机动画来讲述，系好安全带，我们这就出发~

　　期望肯定是要有个绘制月饼的，月饼上有馅的名字，里面有各种线条的绘制，所以抽成一个类，再往主逻辑中实例化一个去实现。

　　祝福语因为简单所以我们直接在主逻辑中绘制，一般每次祝福语只有两句，所以我们用逗号隔开这种形式去拆分吧，而且一个字一个字的打所以记录下当前位置，还有循环周期。

　　我们期望渲染的是月饼的实例，我们应当传递的就是它的坐标和缩放大小以及馅名，接下来我们的重头戏要来了，就是怎么画出一个月饼来~

　　要绘制一款月饼需要堆砌canvas基础绘制，我们观察，一个月饼可以拆分成两个花边，两个圆角矩形，六道横线，和曲折线，和馅名来构成。

　　我们的难点在于如何绘制花边图形呢，其实可以想象成一个圆所以一共360度我们要拆分成多少条边就除以多少，这样就能得到角度，利用原点，就可以算出对应的x轴和y轴坐标，然后连接起来就变成了一个三角形，那么问题来了，怎么做出花边呢，我们可以用贝塞尔曲线来完成它，我们给当前三角形平分得到角度，在给圆的半径加一点延长，使其找到中心点，将其用曲线连接就完成了花边的绘制，因为这里用12条边就遍历计算角度然后绘制一个月饼皮就做好了~

　　还有就是圆角矩形，我们这里用个arcTo这个万能写法去做边因为一共就四个角很容易能平分出Math.PI。

　　另外，要说的就是我们期望的一步步把绘制过程展示出来所以要用一个数组存储绘制过程，记录当前时间，每隔200毫秒追加一次新绘制任务。直至结束，我们要给一个状态通知已经结束了，方面主逻辑进行其他操作。

　　所以要输出两行，且把都号去掉，所以我们要生成一个由逗号分开的二维数组，分别表示第一行和第二行，随着dt的增加而改变绘制的位置，就是这么简单。

　　另外，其实还有很多瑕疵，比如本期用到了字体是仿宋，很多电脑都会带这个字体，但是手机端就很少了，所以我们有时间根据自己要写的文字，拆出一套仿宋字体集来使用。毕竟中文字体太大了，没发直接用的。

　　我们本期用了不少的图形绘制说难不难说简单也不简单，其实但从效果方面还是用svg做路径动画效果更好些。但是canvas绘制运用得当是非常灵活的，用简单图形的组合也能完成惊艳的作品。希望大家受此启发，也完成一款自己的中秋祝福送给亲朋好友。