小程序如何绘制一个圆形图片?
发布于 6 年前 作者 nazhang 6332 次浏览 来自 问答

微信小程序如何使用canvas实现绘制一个圆形的png图片?

canvasContext.drawImage只能改变图片大小,位置,并不能改变图片展现形状,请问如何解决?

2 回复

好的!已经解决了。谢谢!

var ctx = wx.createCanvasContext(‘myCanvas’);

ctx.beginPath();

ctx.arc(30, 30, 26.5, 0, 2 * Math.PI);

ctx.setLineWidth(6)

ctx.setStrokeStyle(‘描边颜色’)

ctx.stroke();//画空心圆

ctx.closePath();

ctx.save();

ctx.arc(30, 30, 25, 0, 2 * Math.PI)

ctx.clip(); //裁剪上面的圆形

ctx.drawImage(‘图片’, 0, 0, 60, 60);

ctx.draw();

回到顶部