网站建设客户分析,国家企业信息公示网(广东),个人设计网站,快速建站实例演示完整版HTML5在线教程之微信小程序“圣诞帽”的实现思路详解大家应该还记得微信小程序“圣诞帽”吧#xff0c;在圣诞的那几天可谓是非常的火爆#xff0c;大家都争相使用#xff0c;本篇文章小编给大家分享一下微信小程序“圣诞帽”的实现思路详解#xff0c;对此感兴趣的小伙伴随…HTML5在线教程之微信小程序“圣诞帽”的实现思路详解大家应该还记得微信小程序“圣诞帽”吧在圣诞的那几天可谓是非常的火爆大家都争相使用本篇文章小编给大家分享一下微信小程序“圣诞帽”的实现思路详解对此感兴趣的小伙伴随着小编一起来看一下吧。1、获取用户头像wx.getUserInfo({success: function(res) {var userInfo http://www.doczj.com/doc/b4d2f33f32687e21af45b307e87101f69f31fb44.htmlerInfovar 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、绘制帽子
