javascript - 如何清除图像以便重绘？

Question

我需要找到一种方法来更改用户点击图片时的图片，我似乎遇到了问题。

这是我的代码:

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var img = new Image();

        img.src = 'Birthday.jpg';

        img.onload = function() {
            context.drawImage(img, 47, 90, 200, 300);
        };

        }

我已经尝试过以下方法:

img.onclick = function() {
            context.clearRect(47, 90, 200, 300);
            img2.src = 'BirthdayOUT.jpg';
            context.drawImage(img2, 47, 90, 200, 300);
        };

Answer 1

当您在 Canvas 上绘制图像时，您不会绘制图像元素本身，而只是绘制位图表示形式。

这意味着 img.onclick 永远不会触发。相反，您必须手动跟踪绘制图像的位置并使用 Canvas onclick，确定是否单击了图像，然后更改绘制新图像。