查看: 57|回复: 1

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

发表于 2018-6-29 11:52:45

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


1、获取用户头像
wx.getUserInfo({
    success: function(res) {
        var userInfo = res.userInfo
        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、绘制帽子
绘制帽子之前,我定义了一个对象object来保存帽子的参数
var hat = {
    url: "../res/hat01.png",
    w: 40,  
    h: 40,  
    x: 100,
    y: 100,
    b: 1,//缩放的倍率
    rotate: 0//旋转的角度
}
接下来开始绘制帽子
drawHat: 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, -hat.h / 2, hat.w, hat.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、改变帽子的参数
移动帽子:
moveHat: function (e) {
     hat.x = e.touches[0].x
     hat.y = e.touches[0].y
     that.drawA()
}
旋转帽子:
rotateHat: function (e) {  
     hat.rotate = e.detail.value    //这一块偷懒了,用slider组件 ,滑动取值
     that.drawA()
}
以上就是扣丁学堂HTML5在线学习小编给大家分享的微信小程序“圣诞帽”的实现思路详解,希望对小伙伴们有所帮助,想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂是专业的HTML5培训机构,扣丁学堂不仅有专业的老师和与时俱进的课程体系,还有大量的HTML5在线视频供学员观看学习,想要学好HTML5开发的小伙伴快快行动吧。扣丁学堂H5技术交流群:559883758。


文章转载自:扣丁学堂http://www.codingke.com/

点评

海!外直播 t.cn/RxlBL8s 禁闻视频 t.cn/RJJZmv0 办公大楼落成,门口对联.书记挥毫,上联:说实话办实事一身正气,下联:不贪污不受贿两袖清风.大家齐赞!考虑民主,征横批,大家不作声,一老农经过,顺口而出:查无此人  发表于 2018-7-2 02:51


回复

使用道具 举报