圣诞帽子小程序,戴圣诞帽的小程序
这两天朋友圈都被“圣诞帽”刷屏了。这个小程序甚至被微信官方辟谣了，又一个现象级的东西。从产品的角度来说，无疑是非常成功的，但是从技术的角度来说，是真的习惯了，创意很重要！简单说明一下思路：获取头像，用画布画出来，然后用画布画一顶帽子，调整帽子的参数(位置、大小、旋转)，最后保存为图片。
先看效果吧。
思路
1.获取用户头像
wx . get userinfo({ success:function(RES){ var userinfo=RES . userinfo var avatar URL=userinfo . avatar URL } })这里有个问题需要注意。canvas不支持在线图片，只获取头像图片地址，所以在这里，你要把图片下载到微信的临时目录。代码如下：
wx . download file({ URL:userinfo . avatar URL，success:function(RES){ if(RES . status code==200){ avatar URL=res.tempfilepath//the地址此处指向本地图片}})在这一步使用微信现成的API获取头像更方便。
2.绘制用户头像
这里封装了常用的方法。下面的avatarImg.w和avatarImg.h是指头像的大小。
Draw avatar:function(img){ CTX . drawImage(img，0，0，avatariimg.w，avatariimg.h)}使用Draw image函数绘制图片。
3.绘制帽子
在画帽子之前，我定义了一个object对象来保存帽子的参数。
Var={url:./res/hat01.png ，w: 40，h: 40，x: 100，y: 100，b: 1，//缩放比例旋转：0//旋转角度}接下来开始画帽子。
draw hat:function(hat){ CTX . translate(hat . x，hat.y) ctx.scale(hat.b，hat . b)CTX . rotate(hat . rotate * Math。PI/180) ctx.drawImage(hat.url，-hat。w/2，-帽子。h/2，帽子。w，帽子。h)}这里稍微解释一下。帽子的中心点用作缩放和旋转的原点。
CTX。Translate (hat.x，hat.y)//Translate是将画布的中心点移动到指定的坐标。此时，原点已经从(0，0)移动到(x，y)了，这是帽子中心点与帽子一半长度和一半宽度的交点。
CTX。DrawImage (hat.url，-hat.w/2，-hat.h/2，hat.w，hat.h)画帽子的关键是把X和Y移动到原点以外。示意图如下：
4.改变帽子的参数
移动帽子：
hat:function(e){ hat . x=e . touches[0]。x hat.y=e.touches [0]。y that.drawa ()}旋转帽子：
旋转帽子：函数(e){ hat . rotate=e.detail.value//This块是懒惰的。使用slider组件，滑动值that.drawA()}来缩放帽子：
scale:function(e){ hat . b=e . detail . value hat . w=40 * hat . b hat . h=40 * hat . b that . drawa()///这里使用slider组件滑动值}改变帽子样式：
hat:function(e){ hat . URL=e.currenttarget.dataset.url//Change hat that . drawA()}这些方法中有drawA()，主要是在每次移动、旋转、缩放或者改变参数的时候重新绘制布料。
5.Canvas导出图片
微信官方提供了相应的API。
savetophoto:function(){ wx . canvastotempfilepath({ x:0，y: 0，width: 240，height: 240，destheight: 240，canvas ID: CTX ，success: function (res) {//Canvas
wx . savimagephotosalbum({ file path:RES . tempfile path，}) wx.showtoast ({title:保存成功 })总结
以上是边肖介绍的微信小程序“圣诞帽”的实现思路。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。