当您绘制到canvas元素，您只需在其中绘制位图立即模式 http://en.wikipedia.org/wiki/Immediate_mode_(computer_graphics).
The elements绘制的（形状、线条、图像）除了它们使用的像素和颜色之外没有任何表示。
因此，要得到一个click事件在canvas element（形状），您需要捕获点击事件canvasHTML 元素并使用一些数学来确定单击了哪个元素，前提是您存储了元素的宽度/高度和 x/y 偏移量。
要添加一个click事件给你的canvas元素，使用...
canvas.addEventListener('click', function() { }, false);
确定哪个element被点击...
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 http://jsfiddle.net/BmeKr/.
这段代码附加了一个click事件到canvas元素，然后推动一个形状（称为element在我的代码中）到elements大批。您可以在此处添加任意数量的内容。
创建对象数组的目的是让我们稍后可以查询它们的属性。将所有元素推入数组后，我们循环遍历并根据每个元素的属性进行渲染。
当。。。的时候click事件被触发时，代码循环遍历元素并确定单击是否位于elements大批。如果是这样，它会触发alert()，可以很容易地对其进行修改以执行某些操作，例如删除数组项，在这种情况下，您需要一个单独的render函数来更新canvas.
为了完整起见，为什么您的尝试不起作用......
elem.onClick = alert("hello world"); // displays alert without clicking
这是分配返回值alert() to the onClick的财产elem。它立即调用alert().
elem.onClick = alert('hello world'); // displays alert without clicking
在 JavaScript 中，' and "语义上相同，词法分析器可能使用['"]用于报价。
elem.onClick = "alert('hello world!')"; // does nothing, even with clicking
您正在将一个字符串分配给onClick的财产elem.
elem.onClick = function() { alert('hello world!'); }; // does nothing
JavaScript 区分大小写。这onclickproperty 是附加事件处理程序的古老方法。它只允许将一个事件附加到该属性上，并且在序列化 HTML 时该事件可能会丢失。
elem.onClick = function() { alert("hello world!"); }; // does nothing
Again, ' === ".
