在微信小程序里效果图：
直接代码：
<canvas style="width: 400px; height: 400px;border:1px solid red" canvas-id="firstCanvas"></canvas>
//index.jsPage({data: {image: {src: "/1.png",width: 200,heigth: 200}},onLoad: function () {let that = this;var contex = wx.createCanvasContext('firstCanvas')contex.save(); // 先保存状态 已便于画完圆再用contex.beginPath(); //开始绘制//先画个圆contex.arc(100, 100, 100, 0, Math.PI * 2, false);contex.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内contex.drawImage(that.data.image.src, 0, 0, that.data.image.width, that.data.image.heigth); // 推进去图片contex.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制contex.draw();}})
如果觉得《微信小程序canvas把正方形图片绘制成圆形》对你有帮助，请点赞、收藏，并留下你的观点哦！
