javascript - 在 Canvas 上添加监听器

嘿，我在画布上有一个简单的三角形，我想在每个三角形的点上添加侦听器，这样，如果用户单击每个点，就会发生动作。
我想知道是否可以在画布上执行此步骤，如果没有，我的替代方法是什么？所以我的主要问题如下：


我可以在画布单点上添加侦听器吗？如果不是，我有什么选择？


更新：

我已经尝试过运气，并成功在所有画布上添加了click事件，然后获得了鼠标单击的当前点，但是我的解决方案不是最终的，也不是很宝贵。

我是否可以在每个单击的点周围创建一个区域，以使用户不必在点击中变得珍贵？

http://codepen.io/Barak/pen/VadQYm

$(function(){
     var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");
     var triangle = [{ x: 58, y: 845 }, { x: 984, y: 845 }, { x: 521, y: 41 }];
  drawTriangle(triangle);
    function drawTriangle(t) {
    ctx.beginPath();
    ctx.moveTo(t[0].x, t[0].y);
    ctx.lineTo(t[1].x, t[1].y);
    ctx.lineTo(t[2].x, t[2].y);
    ctx.closePath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.stroke();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-wrapper">
        <canvas id="canvas" width=1024 height=980></canvas>
  </div>

最佳答案

在画布上没有可以附加事件的点-仅仅是图形Api-图片的容器（请参见W3School以获得更多参考）。

但是，如果您有坐标，则当然可以始终检测“画布”中的单击位置。

我为您设置了fiddle，以显示可能的解决方案。

canvas.addEventListener("mousedown", doMouseDown, false);
function doMouseDown(e) {
for (i = 0; i < triangle.length; ++i) {
  if ((e.x  triangle[i].x) && (e.y === triangle[i].y)) {
    console.log('you hit an edge!');
  }
 }
}

更新：

如果要创建公差，则必须定义要接受的实际位置的正负。以下是一种简单而不优雅的方法：

function tolerance(number){
//define the tolerance here
var tolerance = 15;
//all the accepted numbers within the tolerance will be in this array
var numberArray=[];

for(i=0;i<(tolerance)*2;++i){
    if(i >= tolerance){
        if(i!=tolerance){
            numberArray[i] = numberArray[i-1]-1;
        }else{
            numberArray[i] = number -1;
        }
    }else{
        if(i!=0){
            numberArray[i] = numberArray[i-1]+1;
        }else{
            numberArray[i] = number +1;
        }
    }
}
//don't forget to put the actual number in the array
numberArray.push(number);
return numberArray;
}

现在，您可以将doMouseDown函数更改为如下所示：

function doMouseDown(e) {
for (k = 0; k < triangle.length; ++k) {
    if ((tolerance(triangle[k].x).indexOf(e.x)!=-1) && (tolerance(triangle[k].y).indexOf(e.y)!=-1)) {
        console.log('you hit an edge!');
    }
  }
}

关于javascript - 在 Canvas 上添加监听器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36738009/