如何在 JavaScript 中向 Canvas 元素添加 onClick 事件处理程序？-js教程-PHP中文网

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

Barbara Streisand

发布： 2024-11-14 12:30:02

原创

894 人浏览过

How to Add an onClick Event Handler to a Canvas Element in JavaScript?

如何将 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);
});

登录后复制

说明：

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

尝试失败的原因：