javascript - 'onmouseover' Canvas 中的元素？

Question

我正在制作一个 HTML/JS/CSS 游戏并且已经停止了!我不确定如何将“onmouseover”标签与 Canvas 中的元素一起使用。请帮忙!

尝试过:

particle.onmouseover=function(){myScript};

这是我目前所拥有的:

for (var i = 0; i < 100; i++) { //add particles with random postions
  particles.push(new creat_particle());
}
//function for multiple particles 
function creat_particle() {
  this.x = Math.random() * W;
  this.y = Math.random() * H;
  //Random Color 
  var r = Math.random() * 255 >> 0;
  var g = Math.random() * 255 >> 0;
  var b = Math.random() * 255 >> 0;
  this.color = "rgba(" + r + "," + g + "," + b + ",0.5)";
  //random size 
  this.radius = Math.random() * 45 + 5;
}

感谢任何帮助...

Answer 1

你所要做的就是为 Canvas 添加一个鼠标悬停事件，获取鼠标位置，然后将其与粒子位置进行比较，如下所示。

canvas.onmouseover = function(event) {

    for(i=0;i<100;i++) {
// assuming canvas is positioned at 0,0 of the page
      if(event.clientX => particle[i].x - particle[i].radius&& event.clientX <= particle[i].x + particle[i].radius && event.clientY => particle[i].y - particle[i].radius&& event.clientY <= particle[i].y + particle[i].radius) {
// your event handler code here
      }
     }
   };

由于粒子是圆形的，所以会有轻微的误差。