如何在 JavaScript 中向 Canvas 元素添加 onClick 事件处理程序？

如何将 onClick 事件附加到 Canvas 元素

简介：

Canvas 元素提供了一种在网页上绘制和操作图形的强大方法。然而，向画布元素添加事件处理程序对于初学者来说可能很棘手。本文将演示如何向画布元素添加简单的 onClick 事件处理程序。

问题：

经验丰富的 Java 开发人员在向画布元素添加 onClick 事件处理程序时遇到困难JavaScript 中的画布元素。多次尝试均失败，包括使用 onclick 属性、分配函数、将属性设置为字符串。

解决方案：

在 canvas 元素上绘图时，元素本身除了像素和颜色之外没有任何表示。因此，要检测元素的点击，需要捕获canvas HTML元素上的点击事件，并使用数学计算来确定哪个元素被点击。

要向canvas元素添加点击事件，请使用以下代码语法：

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

要确定被单击的元素，请使用以下代码：

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft + elem.clientLeft,
    elemTop = elem.offsetTop + elem.clientTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for 'click' events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height 
            && x > element.left && x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

// Add element.
elements.push({
    colour: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
});

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});

说明：

此代码附加一个单击事件到画布元素并将单个元素添加到元素数组中。代码循环遍历元素，将单击坐标与元素坐标进行比较，并在元素上发生单击时发出警报。

尝试失败的原因：

• 将alert()的返回值赋值给onClick属性会立即调用alert()函数。
• 对onClick属性进行字符串赋值没有附加事件处理程序。
• 使用古老的onclick 属性区分大小写，在序列化过程中可能会丢失。

以上是如何在 JavaScript 中向 Canvas 元素添加 onClick 事件处理程序？的详细内容。更多信息请关注PHP中文网其他相关文章！