如何将简单的onClick事件处理程序添加到canvas元素？

小编典典

如何将简单的onClick事件处理程序添加到canvas元素？

javascript

我是一位经验丰富的Java程序员，但是大约十年来第一次接触JavaScript / HTML5。我完全困惑于应该是有史以来最简单的事情。

作为示例，我只想绘制一些东西并为其添加事件处理程序。我确定我在做一些愚蠢的事情，但是我搜索了所有内容，没有任何建议（例如，此问题的答案：
添加onclick属性以使用JavaScript输入。我正在使用Firefox10.0.1。我的代码如下。您会看到多条注释行，每行末尾都有关于发生（或未发生）的描述。

这里正确的语法是什么？我要疯了！

<html>
<body>
    <canvas id="myCanvas" width="300" height="150"/>
    <script language="JavaScript">
        var elem = document.getElementById('myCanvas');
        // elem.onClick = alert("hello world");  - displays alert without clicking
        // elem.onClick = alert('hello world');  - displays alert without clicking
        // elem.onClick = "alert('hello world!')";  - does nothing, even with clicking
        // elem.onClick = function() { alert('hello world!'); };  - does nothing
        // elem.onClick = function() { alert("hello world!"); };  - does nothing
        var context = elem.getContext('2d');
        context.fillStyle = '#05EFFF';
        context.fillRect(0, 0, 150, 100);
    </script>

</body>

阅读 935

2020-04-25

共1个答案

小编典典

绘制canvas元素时，您只是在即时模式下绘制位图。

绘制的元素（形状，线条，图像）除使用的像素和颜色外没有其他表示形式。

因此，要获取元素（形状）上的click事件，您需要捕获HTML元素上的click事件，并使用一些数学运算来确定单击了哪个元素，前提是您要存储元素的宽度/高度和x / y偏移量。canvas``canvas

要将click事件添加到canvas元素，请使用…

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

要确定单击了什么元素…

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    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);
});

此代码将click事件附加到canvas元素，然后将一个形状（element在我的代码中称为an
）推入elements数组。您可以在此处添加任意数量的内容。

创建对象数组的目的是让我们稍后可以查询它们的属性。将所有元素都推入数组后，我们循环浏览并根据其属性渲染每个元素。

当click被触发事件，代码遍历元素和确定该点击是在任何中的元件的elements阵列。如果是这样，它将触发一个alert()，可以很容易地对其进行修改以执行某些操作，例如删除数组项，在这种情况下，您需要一个单独的
渲染函数来更新canvas。

为了完整起见，为什么您的尝试不起作用…

elem.onClick = alert("hello world"); // displays alert without clicking

这是将的返回值分配alert()给的onClick属性elem。它立即调用alert()。

elem.onClick = alert('hello world');  // displays alert without clicking

在JavaScript中，'和"在语义上是相同的，词法分析器可能使用['"]引号。

elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

您正在为的onClick属性分配一个字符串elem。

elem.onClick = function() { alert('hello world!'); }; // does nothing

JavaScript区分大小写。该onclick属性是附加事件处理程序的古老方法。它仅允许将一个事件附加到该属性，并且在序列化HTML时该事件可能会丢失。

elem.onClick = function() { alert("hello world!"); }; // does nothing

再次，' === "。

2020-04-25