微信小程序海报画布生成圆形头像
由于海报需求将用户头像在海报上呈圆形
实现过程如下
// 绘制圆形头像
//绘制的头像宽度let avatarurl_width = 40
//绘制的头像高度let avatarurl_heigth = 40
//绘制的头像在画布上的位置let avatarurl_x = 10
//绘制的头像在画布上的位置let avatarurl_y = 10
// 保存之前绘制 ctx.save()ctx.beginPath()
// 圆心x:绘制头像的宽度/2+头像在画布上的位置-- 圆心y:绘制头像的高度/2+头像在画布上的位置 -- 半径:头像的宽度/2ctx.arc(avatarurl_width / 2 + avatarurl_x , avatarurl_heigth / 2 + avatarurl_y , avatarurl_width / 2, 0, Math.PI * 2, false)ctx.clip()ctx.drawImage(this.data.avatarUrl, avatarurl_x , avatarurl_y , avatarurl_width , avatarurl_heigth)
// 恢复之前保存的绘图上下文ctx.restore()
// 绘制ctx.draw()
希望能帮助到各位!
微信小程序海报画布生成圆形头像相关推荐
- 微信小程序实现画布生成海报功能
微信小程序可以通过使用 标签来实现生成海报的功能.以下是基本实现步骤: 1.在 WXML 文件中创建一个 标签,并设置其宽度和高度属性.' <canvas canvas-id="myC ...
- 微信小程序裁剪图片成圆形
代码地址如下: http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在git ...
- 微信小程序业务-字符串生成二维码(weapp-qrcode)
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言 邂逅weapp-qrcode 基本使用 详细参数 小程序组件中使用 image属性详解 想使用网络图片? 参考地址 前言 在小程序项 ...
- 微信小程序:热门表情包+头像+壁纸自动采集多分类微信小程序
这是一款自动采集的一款微信小程序源码 内由表情包,头像,还有壁纸组合而成的一款图片小程序 每一个都自带多种分类,内容丰富运营适合 另外支持插屏广告,激励视频广告,等多种广告 小程序源码下载地址: 微信 ...
- 微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
- 微信小程序:检讨书生成微信小程序源码
对于经常写检讨的小伙伴来说,福音来了 因为这是一款检讨书生成小程序 所以再也不用为了写检讨而烦恼了哦 支持自定义字数下线,主题自定义 支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
- 微信小程序登录获取不到头像和昵称解决办法!
微信小程序登录获取不到头像和昵称主要原因是:小程序wx.getUserProfile接口被收回! 大家可以按照文档操作↓ PS: 针对小程序wx.getUserProfile接口将被收回后做出的授权调 ...
- 微信小程序之画布绘制并管理多张图片
在微信小程序的画布绘制多张图片,很简单,只需要调用drawImage就可以,但是如果要做一个图片编辑的小程序,肯定要对绘制上去的图片.文字等等进行操作,比如移动一下,旋转一下或者缩放等等.但普通的画布 ...
- 【微信小程序】5分钟实现微信小程序海报
5分钟实现微信小程序海报页 备受青睐 不用安装.微信小程序是一种不需要安装即可使用的应用 跨平台性.一份代码即可多个平台使用 推广容易.用户扫一扫或搜一下即可打开应用 推荐使用 随着业务需求的不多发展 ...
最新文章
- 转:Yaf 路由协议
- java里面赋值运算符解释_java复合赋值运算符和赋值运算符
- CUDA线程、线程块、线程束、流多处理器、流处理器、网格概念的深入理解
- Linux Shell脚本入门教程系列之(四)Shell注释
- freetype在Linux平台编译小记
- linux so文件支持系统,让linux支持xfs jfs reiserfs 文件系统
- Freecms商业版 oracle添加信息时报错”转换请求无法实施或不合理”
- java注解 自定义策略传参_Java注解教程及自定义注解
- K8s:调用Java接口创建容器
- 【读书笔记】深入浅出数据分析
- python 日历控件_PyQt5每天必学之日历控件QCalendarWidget
- zynq7000从emmc启动,使用ext4文件系统
- JAVA HTML 转 PDF
- 固定效应or随机效应?如何用matlab进行豪斯曼检验
- 爬虫入门实战第一站——梨视频视频爬取
- Java实现8枚硬币问题(减治法)
- 解释BIOS及BSP
- 解决网络延迟200ms问题
- epson打印机设置方法
- 解决HDF5 library version mismatched error