page({
// 绘制canvas
drawCanvas:function(){
const ctx = wx.createCanvasContext('poster')
// 画圆形二维码
this.circleImg(ctx,this.data.canvasLotteryQR, 151.5, 535.5, 36) // (canvas对象,二维码图片本地路径(如果是网络图片先用wx.downloadFile存本地),坐标x, 坐标y, 半径)
}, // 圆形图片
circleImg: function (ctx, img, x, y, r){
ctx.save()
var d = 2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore()
},
})
相关文章
- 微信小程序绘制自定义海报,可带二维码,头像,文字等
- 微信小程序绘制雷达图(多边形绘制)
- Uniapp 微信小程序分享 - 自定义绘制分享图片
- 使用Java绘制图片边框,解决微信小程序map组件中marker与label层级关系问题,label增加外边框后显示不能置与marker上面
- 微信小程序使用canvas进行图片压缩
- 微信小程序canvas把正方形图片绘制成圆形
- 微信小程序组件内(component)canvas元素的坑 canvasToTempFilePath: fail canvas is empty
- 微信小程序新坑-canvas无法在自定义组件中绘图
- uni-app使用wx-canvas实现微信小程序上显示地图map和坐标geo
- 微信小程序canvas元素悬浮,不随父组件滚动的问题