个人中心
gpt4 book ai didi

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

转载 作者：IT王子 更新时间：2023-10-29 02:39:44 27 4
gpt4 key购买 nike

我是一位经验丰富的 Java 程序员，但我在大约十年内第一次关注一些 JavaScript/HTML5 内容。我完全不知道什么应该是有史以来最简单的事情。

例如，我只想绘制一些东西并向其添加事件处理程序。我确定我在做一些愚蠢的事情，但我已经搜索过了，没有任何建议(例如这个问题的答案:Add onclick property to input with JavaScript)有效。我正在使用 Firefox 10.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>

最佳答案

当您绘制到 canvas 元素时，您只是在 immediate mode 中绘制位图。 .

绘制的元素(形状、线条、图像)除了它们使用的像素和它们的颜色外没有任何表示。

因此，要在 canvas element(形状)上获取 click 事件，您需要捕获 上的点击事件canvas HTML 元素并使用一些数学来确定哪个元素被点击，前提是您要存储元素的宽度/高度和 x/y 偏移量。

要将 click 事件添加到您的 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);
});​

jsFiddle .

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

创建对象数组的目的是让我们稍后查询它们的属性。在所有元素都被插入数组后，我们循环遍历并根据它们的属性呈现每个元素。

当 click 事件被触发时，代码循环遍历元素并确定点击是否在 elements 数组中的任何元素上。如果是这样，它会触发 alert()，可以很容易地对其进行修改以执行某些操作，例如删除数组项，在这种情况下，您需要一个单独的 render 函数更新 Canvas 。

为了完整起见，为什么你的尝试没有奏效......

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

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

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

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

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

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

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

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

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

同样，' === "。

关于javascript - 如何将简单的 onClick 事件处理程序添加到 Canvas 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9880279/

27 4 0
文章推荐： javascript - nodeValue 与 innerHTML 和 textContent。如何选择？
文章推荐： android - 以编程方式在 Android 应用程序中获取 xml 命名空间
文章推荐： java - 如何删除 SOAPElement 中的前缀和命名空间？
文章推荐： javascript - 如何将 JS 变量的值(不是引用)传递给函数？
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com