Question

createImage = (x=0, y=0) => {
    imgC.save()

    imgC.beginPath()
    imgC.moveTo(side/2, center)
    imgC.lineTo(side, 0)
    imgC.lineTo(0, 0)
    imgC.closePath();

    imgC.clip()

    imgC.drawImage(image, x, y)
    imgC.restore()
}

我正在画这样的蒙面图像。我想更新drawImage中的x / y坐标而不更改任何其他内容。我怎么能这样做？

Answer 1

我不确定你想做什么，因为在我看来你能够改变传递的X，Y参数而不会影响其余的表达。

但是，由于某些假设是一些未经测试的代码，所以假设伪代码来理解我分享的可能性。

createImage = (img, x=0, y=0) => {
    img.save()

    img.beginPath()
    img.moveTo(side/2, center)
    img.lineTo(side, 0)
    img.lineTo(0, 0)
    img.closePath();

    img.clip()

    img.drawImage(image, x, y)
    img.restore()
    return img
}

然后你可以使用：

var myImage = createImage(imgC, 100, 50)

3秒后更新X，Y

setTimeout(() => {
    myImage.x = 150
    myImage.y = 300
}, 3000)

希望有所帮助！

更改剪裁图像？

1 个答案: