真机上使用CanvasContext.clip( path2d )无效
发布于 5 年前 作者 xiuyinghu 12845 次浏览 来自 问答
test() {//这是path2d裁剪
    const that = this,
      path = that.can.createPath2D()
    that.ctx.save()
    path.moveTo(3030);
    path.lineTo(12020);
    path.lineTo(20080);
    path.lineTo(110150);
    that.ctx.clearRect(00, that.windowWidth, that.windowWidth)
    that.ctx.clip(path)
    that.ctx.drawImage(that.img, 00, that.windowWidth, that.windowWidth)
    that.ctx.restore()
  }

test1() {//这是路径裁剪
    const that = this
    that.ctx.save()
    that.ctx.beginPath()
    that.ctx.moveTo(2020);
    that.ctx.lineTo(20080);
    that.ctx.lineTo(110150);
    that.ctx.clearRect(00, that.windowWidth, that.windowWidth)
    that.ctx.clip()
    that.ctx.drawImage(that.img, 00, that.windowWidth, that.windowWidth)
    that.ctx.restore()
  }

这是模拟器中,点击裁剪后会这样

path2d和直接使用lineTo

真机上却无效,但真机上不使用path2D直接使用lineTo却没问题

但使用路径之后再用path2D似乎还有save和restore无效的情况,具体请使用代码片段尝试

真机:红米k30pro;安卓11;miui12.5.2稳定版

1 回复

2d canvas 暂时还不支持传递path2d对象,可以先使用路径裁剪实现,后续我们再补齐。

回到顶部