小程序canvas实现圆框图片

1.封装此方法

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);

},

2.调用

var context = wx.createCanvasContext('myCanvas')//画布canvasid

var link1=图片地址

_this.circleImg(context, link1, 500, 100, 80, 80);