小程序canvas绘制圆形微信头像

小程序canvas绘制圆形微信头像,第1张

获取用户头像信息之后,跳转到绘制页面,在绘制页面完成绘画 *** 作。

第二步:绘制用户头像。

绘画好用户头像之后的图片是这样的:

点击下面网址可以在线观看视频

本节知识点

同样是先看官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.html

接下来我们就使用官方示例看能不能获取到用户信息

我们通过第二步获取到了用户的相关信息,接下来我们就来把获取到的用户信息展示出来。

可以看到左边就是用户头像和昵称了。

我们通常头像应该是圆形居中的,接下来我们就借助与css来美化布局

这里重点是me.wxss里的border-radius,border-radius是用来实现圆角的,当我们的宽高和圆角的大小都是128rpx时,我们展示出来的也就是圆角头像了。

虽然我们实现了上面的圆角头像,但是布局还是有些不太好看。

接下来我们就把头像和昵称居中显示

实现效果如下

到此我们的个人中心页也就差不多实现了。

有问题可以加我微信2501902696(备注小程序)

点通信录,选择群聊,再点右上角的+号,将好友一个个选上,然后点击确定,就会创建一个群,超过100个需要邀请对方入群,并且对方需要绑定yhk,点开创建的群之后,就是群里所有好友的照片集合了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/yw/8081330.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-13
下一篇 2023-04-13

发表评论

登录后才能评论

评论列表(0条)

保存