canvas的fillRect与drawImage问题
发布于 6 年前 作者 huangli 4648 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)
  1. filleRect后,clip圆型区域画图片变成了方的了



  • 预期表现

1.图片是圆的而不是方的

  • 复现路径
  • 提供一个最简复现 Demo

draw: function() {

const ctx = wx.createCanvasContext(‘test1’)

// save the default fill style

ctx.save()

ctx.setFillStyle(‘blue’)

ctx.fillRect(10, 10, 150, 100)

// restore to the previous saved state

ctx.restore()

// ctx.save()

// ctx.setFillStyle(‘red’);

// ctx.fillRect(50, 50, 150, 100)

// ctx.restore()

ctx.save()

ctx.beginPath()

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

ctx.clip()

ctx.setFillStyle(‘yellow’);

ctx.fill()

ctx.drawImage(’/images/wx.jpg’, 75, 25, 50, 50)

ctx.restore()

ctx.draw()

}

2 回复

我也遇到了同样的问题,先fillRect,再调用clip就发现画不出原型了,来这里找答案了,试了楼主的ctx.fillRect(0000)确实可以,只能先这样了,期待官方的回答。

我也遇到了 只要clip在fillRect下,圆形就会失效

回到顶部