canvas鼠标监听事件怎么点击没反应

canvas鼠标监听事件怎么点击没反应

var canvas = document.getElementById("logo");
var context = canvas.getContext("2d");
var logo = new Image();
logo.src = "img/logo.gif";
logo.onload = function() {
context.drawImage(logo, 0, 0);
//监听鼠标事件
context.addEventListener("click",show= function(){alert("hehe");},false);

canvas内容是没有事件的 有事件的只有canvas本身 通过鼠标在canvas上面移动获取鼠标位置以此来改变点击事件可以 比如 一个长方形或者正方形 计算长方形 200px*100px 根据中心点x 鼠标位置x 距离中心点 <100 and y和鼠标y距离<50 或者一个圆的半径为10px 计算方式就是 var x = 鼠标位置 x - 圆中心位置 x; var y = 鼠标位置 y- 圆中心位置 y; math.pow((x *x + y * y), 0.5)<10; 在往其他的一些不规则图形就比较麻烦了需要很高的数学功底 如果不会计算何以试试一些插件 pixi 或者phase之类 除了基本点击还带一些物理效果