小程序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);