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

当您将图像绘制到画布时，您不会绘制图像元素本身，只是一个位图表示。

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

Answer 2

您的问题不是清除画布，而是点击事件处理 img.onclick未触发，因为画布上的图片不是Image对象。请参阅this作为示例。

Answer 3

你应该在设置src之前创建你的img.onload函数，否则onload可能永远不会触发。

Answer 4

我不确定你要在这里实现什么，但如果你只是想在页面上有一个图像，请不要使用'canvas'并通过'src'属性更改图像。 /> 但是，如果你想在画布上使用它 - 我怀疑 - 你必须在绘制时存储图像的坐标/尺寸。然后，要更改图片，请使用'clearRect（）'将该区域空白并绘制新图像。

请注意，在您的代码中，'img'不会作为元素传递给画布，而是作为位图传递，如'Simon Sarris'所述。这意味着，必须将“onclick”事件的处理程序分配给画布。然后检查点击是否在图像的边框内出现。要实现这一点，您需要从事件对象访问“clientX”和“clientY”，该事件对象声明鼠标单击相对于客户区的位置。确保相对于客户区域保持img坐标。

使用Javascript：

window.onload = init;

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

function init(){
    img.src = 'Birthday.jpg';
    context.drawImage(img, /* your img coords */ );
    canvas.addEventListener('click', onCanvasClick);
}

function onCanvasClick(event){
    var clickX = event.clientX;
    var clickY = event.clientY;

    if ( clickX > imgLeft && clickX < imgRight   &&   clickY > imgTop && clickY < imgBottom ){ changePicture(); }
}

function changePicture(){
    context.clearRect( /* your img coords */ );
    img.src = /* new img URL */;
    // save new img coords before next step
    context.drawImage(img, /* your new img coords */ );
}

图像坐标称为'imgLeft'，'ImgRight'，'ImgTop'，'imgBottom'/相对于客户区！您可能必须在'addEventListener（）'中修改函数名称，我不完全确定。也许如下：

canvas.addEventListener('click', function(){ onCanvasClick(); });

如何清除图像以进行重绘？

4 个答案: