"onmouseover" element w kanwie? - javascript, css, hover, onmouseover

Tworzę grę HTML / JS / CSS i przestałem! Nie jestem pewien, jak użyłbym tagu „onmouseover” z elementem w moim obszarze roboczym. Proszę pomóż!

WYPRÓBOWANY:

particle.onmouseover=function(){myScript};

Oto, co mam do tej pory:

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;
}

Każda pomoc doceniona ...

Odpowiedzi:

co musisz zrobić, to dodać zdarzenie mouseover dla płótna, uzyskać pozycję myszy, a następnie porównać ją z pozycją cząstki jak poniżej.

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
}
}
};

Nastąpi niewielka niedokładność, ponieważ cząstka ma okrągły kształt.