test() {//这是path2d裁剪
const that = this,
path = that.can.createPath2D()
that.ctx.save()
path.moveTo(30, 30);
path.lineTo(120, 20);
path.lineTo(200, 80);
path.lineTo(110, 150);
that.ctx.clearRect(0, 0, that.windowWidth, that.windowWidth)
that.ctx.clip(path)
that.ctx.drawImage(that.img, 0, 0, that.windowWidth, that.windowWidth)
that.ctx.restore()
}
test1() {//这是路径裁剪
const that = this
that.ctx.save()
that.ctx.beginPath()
that.ctx.moveTo(20, 20);
that.ctx.lineTo(200, 80);
that.ctx.lineTo(110, 150);
that.ctx.clearRect(0, 0, that.windowWidth, that.windowWidth)
that.ctx.clip()
that.ctx.drawImage(that.img, 0, 0, that.windowWidth, that.windowWidth)
that.ctx.restore()
}
这是模拟器中,点击裁剪后会这样
path2d和直接使用lineTo
真机上却无效,但真机上不使用path2D直接使用lineTo却没问题
但使用路径之后再用path2D似乎还有save和restore无效的情况,具体请使用代码片段尝试
真机:红米k30pro;安卓11;miui12.5.2稳定版
2d canvas 暂时还不支持传递path2d对象,可以先使用路径裁剪实现,后续我们再补齐。