本文主要和大家分享微信小程序“圣诞帽”的实现方法，希望能帮助到大家。这两天朋友圈被“圣诞帽”刷屏，这个小程序连微信官方都出来辟谣了，又一个现象级的玩意儿。从产品角度而言无疑是非常成功，但从技术角度而言是确实习以为常，创意很重要！简单说一下思路：获取头像，把头像画在canvas里面，接着往canvas里画帽子，调整帽子的参数（位置、大小、旋转），最后保存为图片。

先来看看效果

思路

1.获取用户头像

这里有个问题需要注意，canvas不支持网络图片，上面获取的只是头像图片地址，所以在这里要把图片下载到微信的临时目录。代码如下：

获取头像这一步用的是微信现成的API 比较方便。

2.绘制用户头像

此处封装了常用的方法，下方avatarImg.w和avatarImg.h是指头像的大小。

绘制图片使用drawImage函数

3.绘制帽子

绘制帽子之前，我定义了一个对象object来保存帽子的参数

接下来开始绘制帽子

这里要稍微解释下，是以帽子的中心点为原点进行缩放、旋转

此时的原点已经从（0，0)移动到（x,y）,也就是帽子的中心点，帽子长的二分之一和宽的二分之一交汇处。

画帽子的关键是把x，y 移动到原点之外,示意图如下：

4.改变帽子的参数

移动帽子:

旋转帽子：

缩放帽子：

改变帽子样式：

这几个方法中都有drawA(),这主要是每一次移动、旋转、缩放、改变参数时重绘画布。

5.Canvas导出图片

微信官方有提供相应API

最后保存到相册

以上就是微信小程序 “圣诞帽” 实现方法全面分享展示的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。