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

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

javascript html canvas

Javascript 如何将简单的onClick事件处理程序添加到canvas元素？,javascript,html,canvas,event-handling,onclick,Javascript,Html,Canvas,Event Handling,Onclick,我是一名经验丰富的Java程序员，但我正在研究一些JavaScript/HTML5的东西，这是大约十年来的第一次。我完全搞不懂什么才是最简单的事情作为一个例子，我只想画一些东西并向其中添加一个事件处理程序。我肯定我在做一些愚蠢的事情，但我已经搜索了所有地方，没有任何建议（例如，这个问题的答案：）起作用。我正在使用Firefox10.0.1。我的代码如下。您将看到几行注释，在每行的末尾是对发生了什么（或没有发生什么）的描述这里的正确语法是什么？我快疯了 <html> <bod

我是一名经验丰富的Java程序员，但我正在研究一些JavaScript/HTML5的东西，这是大约十年来的第一次。我完全搞不懂什么才是最简单的事情

作为一个例子，我只想画一些东西并向其中添加一个事件处理程序。我肯定我在做一些愚蠢的事情，但我已经搜索了所有地方，没有任何建议（例如，这个问题的答案：）起作用。我正在使用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>


var elem=document.getElementById（'myCanvas'）；
//elem.onClick=alert（“hello world”）；-显示警报而不单击
//elem.onClick=alert（'hello world'）；-显示警报而不单击
//elem.onClick=“警报（'hello world！'）”；-什么也不做，即使点击
//elem.onClick=function（）{alert（'hello world！'）；}；-无所事事
//elem.onClick=function（）{alert（“hello world！”）；}；-无所事事
var context=elem.getContext（'2d'）；
context.fillStyle='#05EFFF'；
fillRect（0,0150100）；

当您绘制到

画布

元素时，只需在中绘制位图即可

绘制的元素（形状、线条、图像）除了使用的像素和颜色外，没有任何表示

因此，要在

canvas

元素（shape）上获取单击事件，您需要捕获

canvas

HTML元素上的单击事件，并使用一些数学来确定单击了哪个元素，前提是存储元素的宽度/高度和x/y偏移量

要将

单击

事件添加到

画布

元素，请使用

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（）

的返回值分配给

elem

的

onClick

属性。它会立即调用

警报（）

在JavaScript中，

和

“

在语义上是相同的，lexer可能使用

['”]

作为引号

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

同样，

“==”

作为alex回答的替代：

您可以使用SVG图形而不是画布图形。在这里，您可以直接向绘制的DOM对象添加事件

例如，见：

您还可以将DOM元素，如

div

放在画布顶部，表示画布元素，并以相同的方式定位

现在，您可以将事件侦听器附加到这些div并运行必要的操作。

非常简洁，但是当使用上下文旋转时，很难跟踪x，y坐标，因此我演示了如何跟踪这些坐标

基本上，我是在使用这个函数&在绘制对象之前，给它一个角度和在这个角度中移动的距离

function rotCor(angle, length){
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = length*cos;
    var newy = length*sin;

    return {
        x : newx,
        y : newy
    };
}

我推荐以下文章：它经历了各种情况

但是，它不包括

addHitRegion

API，这必须是最好的方法（使用数学函数和/或比较非常容易出错）。这种方法非常详细。

作为在静态画布上的另一种廉价选择，使用带有usemap定义的重叠img元素既快又脏。在基于多边形的画布元素（如饼图）上尤其有效。

答案可能很晚，但我只是在准备

70-480

考试时阅读了这篇文章，并认为这是可行的-

var elem = document.getElementById('myCanvas');
elem.onclick = function() { alert("hello world"); }

请注意事件为

onclick

，而不是

onclick

示例。

2021:

要创建可跟踪元素，应使用以下方法

您应该在画布上侦听鼠标事件以获取点（鼠标）坐标，然后使用

CanvasRenderingContext2D.isPointInPath（）

或

CanvasRenderingContext2D.isPointInStroke（）

精确检查鼠标是否位于元素上方

IsPointInPath:

const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
//创建圆
常数圆=新路径2D（）；
圆弧（150,75,50,0,2*Math.PI）；
ctx.fillStyle='红色'；
ctx.填充（圆圈）；
//听鼠标移动
canvas.addEventListener（'mousemove'，函数（事件）{
//检查点是否在圆内
if（ctx.isPointInPath（圆圈、event.offsetX、event.offsetY））{
ctx.fillStyle='绿色'；
}
否则{
ctx.fillStyle='红色'；
}
//画圈
clearRect（0，0，canvas.width，canvas.height）；
ctx.填充（圆圈）；
})；

Hmm…如果我有误解，请原谅-但我不是在画布元素上捕获点击事件吗？我不确定你所说的点击了什么元素是什么意思。这个页面上只有一个元素，对吗？他指的是“画布中的哪个元素”-就是哪个形状“可以这么说。谢谢，非常感谢——虽然我还不完全清楚最后一点。我在这里遵循这个示例：（使用他们描述的匿名函数），它可以工作，即使我将跨度更改为画布。因此，我不难慢慢地将他们的例子转化为我的，看看我做错了什么。感谢您的详细回复！解释为什么我的各种尝试都是错误的特别有用。@Jer不用担心，如果你有更多问题，请随时在Twitter上发布和ping我，@HashRocketSyntax它应该可以正常工作，只需更新对象在内存中的位置并使用这些定义来渲染

function rotCor(angle, length){
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = length*cos;
    var newy = length*sin;

    return {
        x : newx,
        y : newy
    };
}

var elem = document.getElementById('myCanvas');
elem.onclick = function() { alert("hello world"); }