按照官方示例
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/clip.html
wx.downloadFile({ url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg', success: function (res) { ctx.save() ctx.beginPath() ctx.arc(50, 50, 25, 0, 2 * Math.PI) ctx.clip() ctx.drawImage(res.tempFilePath, 25, 25) ctx.restore() ctx.draw(true) }}) |
在测试开发工具上正常显示，但是只要在前面绘制一次fill()和stroke()，就会导致后续的clip全部失效
以下为测试代码：
testClip() { let ctx = wx.createCanvasContext('myCanvas'); ctx.rect(0, 0, 100, 100); // 下面的fill和stroke都会导致clip失效 ctx.fill(); // ctx.stroke(); ctx.draw(true); // 文档上的例子 wx.downloadFile({ url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg', success: function (res) { ctx.save() ctx.beginPath() ctx.arc(50, 50, 25, 0, 2 * Math.PI) ctx.clip() ctx.drawImage(res.tempFilePath, 25, 25) ctx.restore() ctx.draw(true) } })} |
，真机测试正常。
BUG图
就没人看看么？
兄弟，放弃吧，这问题我半年前已经提过了
楼主你好，这个问题是因为代码实现上有问题，在 clip 之前调用一下 ctx.fill(); 就没问题了。如果有绘图需求，欢迎使用我们开源的 https://github.com/Kujiale-Mobile/Painter 库，该库也针对上述问题作出了解决
@彭涛 Chris 非常感谢你的回答，经过测试，已经解决问题，非常感谢。前段时间也研究过你们的Painer,非常不错的一个项目，我同事有使用过。 有点好奇的是，你们的PainerCore.git 库是否有借鉴过https://github.com/demi520/wxapp-qrcode ?再次感谢你的回答，希望这个项目越做越好，越来越强大。
对，Painter 中的二维码绘制部分是使用的该库中的代码，并做了些修改，请问这个库是你们开源的吗？很厉害哦，我们准备在 readme 中加入一个 致谢 :)
你好，请问你怎么解决的 我clip两个圆，放图片，模拟器上没问题，真机上只画了一个圆，另一个是正方形，微信版本是6.7.1 不是说修复bug了吗，望分享经验，谢谢
wxapp-qrcode的库不是我写的，当初我在使用的时候，遇到了一些问题，在翻看源码后，进行了修改，并提交了pullrequest https://github.com/demi520/wxapp-qrcode/pull/9 .不过，我自己也在准备一个插件，功能类似于html2canvas.js的功能，后期如果有什么问题，希望你能不吝赐教。谢谢
非常感谢你的提问！
如你所说，微信的clip BUG在6.6.7上面是有问题的，在后续版本中已经修复了。
至于你的业务场景我并不清楚，所以，我只能展示一段我使用中的代码，供你参考：
drawAvatarImage(url, str) {let that =this;let _feedData =this.data.feedData;let avatar_W = 90;context.save();context.beginPath();context.arc(dpx2px(avatar_W / 2 + 30), dpx2px(avatar_W / 2 + 400), dpx2px(avatar_W / 2), 0, 2 * Math.PI);context.stroke();context.clip();context.closePath();context.drawImage(url, dpx2px(30), dpx2px(400) + BHError, dpx2px(90), dpx2px(90));context.restore();// 顺道绘制用户名context.setFillStyle('#333333');context.setFontSize(dpx2px(32));context.setTextAlign('left');context.fillText(String(_feedData.nickname), dpx2px(140), dpx2px(455) + BHError);context.draw(true, () => {console.log('绘制头像完成');});},其中的一些变量是前置的一些数据，如果可以理解，那就直接替换即可。
希望对你能有帮助。