如何在头像上加东西,如何在头像中加东西

首页 > 经验 > 作者:YD1662022-10-27 22:54:41

前言

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

页面

如何在头像上加东西,如何在头像中加东西(1)

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

扫码看真实效果

如何在头像上加东西,如何在头像中加东西(2)

开发思路

跟真实的作画很类似。

1.准备一块白纸(canvas画板)

ctx = wx.createCanvasContext('myCanvas')

2.画头像

ctx.drawImage(imgPath, 0, 0, 300, 300)

3.在头像右上角画一个红色的小圆

ctx.fillStyle = "red" ctx.arc(260, 40, 40, 0, 2 * Math.PI) ctx.fill()

4.在小圆上写一个数字

ctx.font = "50px system-ui" ctx.fillStyle = "#FFFFFF" ctx.textAlign = "center" ctx.fillText(num, 260, 60) ctx.draw()源码地址

https://github.com/bear2047/avatar-plus-number

结语

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

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.