一键圣诞帽 html5源码,HTML5在线教程之微信小程序“圣诞帽”的实现思路详解

HTML5在线教程之微信小程序“圣诞帽”的实现思路详解

HTML5在线教程之微信小程序“圣诞帽”的实现思路详解

大家应该还记得微信小程序“圣诞帽”吧，在圣诞的那几天可谓是非常的火爆，大家都争相使用，本篇文章小编给大家分享一下微信小程序“圣诞帽”的实现思路详解，对此感兴趣的小伙伴随着小编一起来看一下吧。

1、获取用户头像

wx.getUserInfo({

success: function(res) {

var userInfo = http://doc.wendoc.comerInfo

var avatarUrl = userInfo.avatarUrl

}

})

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

wx.downloadFile({

url: userInfo.avatarUrl,

success: function (res) {

if (res.statusCode === 200) {

avatarUrl = res.tempFilePath //这里的地址是指向本地图片

}

}

})

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

2、绘制用户头像

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

drawAvatar: function (img) {

ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)

}

绘制图片使用drawImage函数

3、绘制帽子