效果图:

canvas画圆形图片

实现环境在微信小程序中

参考网站https://www.jianshu.com/p/9a6ee2648d6f

先封装circleImg()方法

circleImg: function (ctx, img, x, y, r){
ctx.save();
var d = 2 * r;
var cx = x + r;
var cy = y + r;
ctx.beginPath();
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
},
var ctx = wx.createCanvasContext('radarcanvas');
this.circleImg(ctx, "../images/detail2/detail7.jpg",300, 853, 64);
ctx.draw(0, 0, 750, 1334);

相关文章: