如何在画布圆上附加jQuery Click事件处理程序以显示弹出框

在画布中，不能使用DOM元素，这就是为什么您不能附加到画布上的任何内容的原因。

对于画布，我们只有坐标。 我们将click事件附加到canvas元素上并读取点击发生的坐标。 当我们在画布上绘制东西时，我们只是记住这一点，当单击时，我们搜索在画布上绘制的任何东西的坐标是否与所单击的坐标相匹配。

看例子http://jsfiddle.net/Deele/N2uX5/

var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d'),
    clickableAreas = [];
$(function() {
    $("#comment_save").click(function(){
        //drawing circle
        context.beginPath();
        context.arc(90,60,10,0,2*Math.PI);
        context.lineWidth = 2;//for border thikness
        context.fillStyle = 'green';
        context.fill();
        context.strokeStyle = 'gray';
        context.stroke();
        //drawing text
        context.font="15px Georgia";
        context.fillStyle = 'yellow';
        context.fillText('1',80,65);
        $("#myCanvas").click(function(e){
            var x = e.pageX - this.offsetLeft,
                y = e.pageY - this.offsetTop;
            console.log('Click at ['+x+'|'+y+']');
            if (coordinatesWithin(x, y, 90 - 10, 90 + 10, 60 - 10, 60 + 10)) {
               alert('circle was clicked');
            }
        });
    });
});
function coordinatesWithin(x,y, minX, maxX, minY, maxY) {
    return (x >= minX && x <= maxX && y >= minY && y <= maxY);
}

那里有一些教程，介绍如何自动执行此过程以及如何对此进行更好的控制，例如http://pterkildsen.com/2013/06/28/create-a-html5-canvas-element-with-clickable-elements/

如果您在画布上绘制了很多东西，它们具有详细的形状（不是正方形），多层，并且希望知道单击的是哪一个，那么我将使用坐标数组的方法，其中所有坐标都是存储并存储的所有事物，当逐层绘制在画布上时，将拥有特定像素的所有权；当所有事物都绘制在画布上时，您将以带有坐标的数组结尾，其中每个坐标都有特定的所有者，由某种ID和数组定义具有由ID标识的回调函数。 单击画布时，您只需在第一个数组中找到坐标，然后从第二个数组中触发函数。