反馈一个 Bug ，fillRect之后clip失效
const ctx = wx.createCanvasContext('myCanvas')
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.fillRect(10, 10, 150, 75)
ctx.draw()
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)
}
})
|
![]()
const ctx = wx.createCanvasContext('myCanvas')
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与clip之间的矛盾。
并非fillRect之后clip失效了，只是在fill的范围内clip失效了。
我没有探究fill与clip之间更底层的逻辑，而是采用了一种折中的方法（毕竟我使用fill仅仅是填充背景色），使用drawImage来填充背景色，这样clip的表现就正常了。
供参考
@纸短 有解决吗, 我也遇到了, 有点蒙圈, 只有在fillRect的区域就会是clip失效, 如果一般在这个区域, 就会一般有效, 一般无效...