1

当用户点击它时，我试图让一个事件在图像上工作。

var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.style = "border:2px solid black";
canvas.addEventListener('click', clickReporter, false);
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

var clickhere = new Image();

clickhere.onload = function () {
        draw();
};

clickhere.src = "clickhere.png";


function draw() {
ctx.drawImage(clickhere, 200, 200);
}

function clickReporter(e) {
    alert("Thanks for clicking!");
    }

显然，只要用户在画布上单击，所有这些代码都会让警报框消失。图像为 100 x 100 像素。

4

1 回答 1

1

首先：您的代码显然有关于图像的错误（至少在您提供的示例中）：

var button = new Image();

clickhere.onload = function () {
    draw();
};

clickhere.src = "clickhere.png";

function draw() {
ctx.drawImage(clickhere, 200, 200);
}

应该像这样才能使示例起作用：

var button = new Image();

/// use button for these as well -
button.onload = function () {         /// here
    draw();
};
button.src = "clickhere.png";        /// here

function draw() {
    ctx.drawImage(button, 200, 200); /// and here (or use 'this' instead)
}

下一个问题

Canvas 不知道我们在其中绘制了什么，因此我们需要确保我们自己提供所有底层逻辑来处理这些事情。

例如：这是检查图像被绘制到的区域是否被单击的一种方法：

function clickReporter(e) { /// assign event to some variable

    /// adjust mouse click position to be relative to canvas:
    var rect = this.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    /// check x/y coordinate against the image position and dimension
    if (x >= 200 && x <= (200 + button.width) &&
        y >= 200 && y <= (200 + button.height)) {
        alert("Thanks for clicking!");
    }
}

您可能希望将这些半绝对边界转换为更动态的东西，例如使用带有自定义对象的图像，您可以在其中存储其 x 和 y 位置等等。但你应该明白这一点。

更新：

一个修改过的小提琴在这里

于 2013-11-13T04:47:52.917 回答