微信小程序画布开发小记

最近圣诞节就要到了，于是想为我的小程序添加个圣诞帽生成的功能，可以为你的头像选择圣诞帽，然后生成图片到本地。看下效果图，有兴趣的小伙伴也可以扫小程序码体验一下

在开发这个功能的过程中，遇到了一些小问题，就在这里记录一下吧。

一、canvas加载图片问题

在canvas里无法直接加载网络图片，只能使用本地的。所以需要使用 wx.getImageInfo 来把网络图片缓存到本地，然后才能使用。我在绘制图片的时候是使用懒加载的方式，没有在一开始的时候就把全部图片都缓存下来，只有在用户点击的时候，才会缓存图片，并保存缓存路径，这样下次继续绘制同样的图片时速度就会快很多。

 

二、canvas坐标原点变换问题

我们在绘制帽子的时候，因为帽子是有一定的旋转角度以及它和左上方的顶点是有距离的，所以我们需要通过translate和rotate方法去变换坐标原点和角度。