简单三步搞定一个头像装逼小程序

628 阅读1分钟

前言

这个世界,装逼的需要永远有!
我们搞技术的人,不求人,自己撸。
在一个风雨交加的夜晚,我打开电脑,准备开发一款装逼的小程序。
我把它取名为「我的头像加数字」,因为其他的好名字都被占了。

页面

17.png

就一个页面
一个放头像的框框
一个放数字的地方
一个选择头像的按钮
一个保存编辑好的头像的按钮
是不是很简单?

扫码看真实效果

gh_30419cc55ee9_258.jpg

开发思路

跟真实的作画很类似。
  1. 准备一块白纸(canvas画板)
ctx = wx.createCanvasContext('myCanvas')
  1. 画头像
ctx.drawImage(imgPath, 0, 0, 300, 300)
  1. 在头像右上角画一个红色的小圆
ctx.fillStyle = "red"
ctx.arc(260, 40, 40, 0, 2 * Math.PI)
ctx.fill()
  1. 在小圆上写一个数字
ctx.font = "50px system-ui"
ctx.fillStyle = "#FFFFFF"
ctx.textAlign = "center"
ctx.fillText(num, 260, 60)
ctx.draw()

源码地址

github.com/bear2047/av…

结语

不管在头像上画一个啥,都是一个路子,你不来玩一把?