教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像

昨天朋友圈被「请给我一面国旗@微信官方」刷屏，虽然知道是假的，但是从另一个角度来看，弄清楚如何实现更有趣。

1、canvas

这就不得不提到小程序中的 API canvas，H5 中也是有 canvas 的，不过之前也一直没有机会用，这次正好乘机试试水。

晚上回家看了下官方文档，网上搜了一些类似的功能实现，最后写好了一个 demo，基本上是能初步绘制国旗头像了。

当然以后如果想要绘制其他带挂件的头像，只需要更改挂件素材即可，提前预约帮你们定做今年的圣诞帽。

2、代码来了

实现过程主要分为以下几个步骤：

1、新建 canvas 画板

2、绘制头像当做背景（demo 目前是自行上传头像制作）

3、绘制国旗边框

4、保存到手机相册（需授权）

废话不多说，直接上代码：

// wxml 页面
<view class="container"><!-- 头像绘制区域 --><canvas canvas-id="myAvatar" class="canvas"></canvas><!-- 按钮 --><button class="btn-save" bindtap="upload">上传头像</button><button disabled="{{ !save }}" class="btn-save" bindtap="saveImg">保存到相册</button>
</view>

// 部分功能 js
// 绘制头像背景
drawAvatar() {var that = this;var p = that.data;context = wx.createCanvasContext('myAvatar', this);context.drawImage(p.src, 0, 0, 256, 256);context.draw(true)context.save();context.translate(p.hat.x, p.hat.y)context.scale(p.hat.b, p.hat.b)context.rotate(p.hat.rotate * Math.PI / 180)context.drawImage(p.hat.url, 0, 0, p.hat.w, p.hat.h)context.draw(true)this.setData({save: true})
},// 保存图片
saveImg() {wx.canvasToTempFilePath({canvasId: 'myAvatar',success(res) {wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showToast({title: '保存成功'})},fail(res) {wx.showToast({title: '取消保存...',icon: 'none'})}})}})
}

3、最后

demo 写完了，以小程序的尿性，怎么会没有坑呢？发现真相的我眼泪差点掉下来，而且这个坑不是一般的坑，弄了老半天都没解决。

具体是啥坑小程序留言区揭晓，感兴趣的欢迎来留言讨论如何解决，到发文为止依旧是个巨坑。

公众号「我是玖柒后」后台回复「头像」即可获取 demo 源码，填坑不忘挖坑人，我太南了。

推荐文章：

小程序九九八十一坑之跳转传参

转载于:https://www.cnblogs.com/msunh/p/11587120.html

教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像相关推荐

微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)
微信小程序之使用canvas给微信头像加小红旗情境:新中国成立70周年,普天同庆.昨天看到朋友圈中被刷屏的@官方微信给自己的头像加小红旗.服务器被卡爆,很多朋友说换头像不成功. 任务:打算自己写一 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
微信小程序之基于canvas绘制高铁线路图
前几天@天下雪给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂:如果有更简单的思路可以留言回复: 关注微信公众号,获取源码和教程下面说一下我的实现思路: ...
小程序之基于canvas绘制高铁线路图
前几天@天下雪给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂:如果有更简单的思路可以留言回复: 关注微信公众号,获取源码和教程下面说一下我的实现思路: ...
手把手教你制作自己的小程序
(小程序开发全套视频教程源码打包放到最后) 做一个自己的小程序共有四个步骤: 1.注册微信小程序. 2.制作小程序. 3.上传并提交审核. 4.审核通过,小程序上线. 简单来讲即四步操作法: 注册-- ...
零基础手把手教你制作一个微信小程序云开发-实验室仪器管理系统（二）
书接上文,我们了解到了怎么在微信开发者工具上新建一个空的云开发项目. 别急,你以为你能大展身手开始写代码了? 答案是否定的,首先你要先开始对小程序进行模块拆分郦波老师有一句话说得很好:解决问题的最好 ...
用微信小程序开发的Canvas绘制可配置的转盘抽奖
使用https://github.com/givebest/GB-canvas-turntable代码移植过而来. 其它微信小程序感觉是个半成品,代码移植过程比较繁琐麻烦.canvas API 部分 ...
小程序 mpvue 使用canvas绘制环形图表
本来想用css3来实现,发现轮廓边上残影严重,所以直接用小程序的canvas使用来. 最终效果如下: 我的整页代码如下,里面已经写出备注来. <template><div class ...
微信小程序开发—(八)canvas绘制图形
一.小知识 (1).API接口 (2).context 对象的方法列表二.步骤 wxml中: <canvas canvas-id="myCanvas" class=&quo ...
小程序中使用canvas绘制海报
最近项目需求使用canvas绘制朋友圈可分享的海报,中间遇到很多问题,于是上网搜索,完美解决后,在此总结一下. 先来看一下效果图,点击按钮生成带二维码的图片. 1.关于canvas画布的宽度和高度 w ...

教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像

教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像相关推荐

最新文章

热门文章