Canvas 当鼠标悬停在特定坐标上时激活事件

Question

所以我想做的是，当我将鼠标悬停在 canvas 附近（340x，100y）的某处时，它会运行我告诉它在里面做什么。

    ctx.canvas.addEventListener('mouseover', function(event){
            ctx.clearRect(0, 0, 1000, 1000);
    });

我只有上面那个，不知道具体坐标怎么弄

另外，当我在做的时候，我怎么能用整个数组来做同样的事情呢？

提前感谢您提供任何有用的建议。哦，我没有使用 JQuery。只是 Javascript 和 HTML.

Answer 1

您可以使用 clientX 和 clientY 属性来检测合作 ordinate.If 当鼠标悬停在 (400,400 ) 协调你可以使用 clinetX/clientY;

how could I make the same thing happen but with an entire array

如果你想这样做 array（如果你的意思是检查多个坐标），你必须创建一个包含不同坐标的对象数组。

      var x=[30,45,50];  // define desired X co-ordinates
      var y=[40,50,75];  // define desired Y co-ordinates
      var coObj=[];   // an empty array to hold all possible (x,y) co-ordinates

       x.forEach(function(el,index){
             coObj.push({x:el,y:y[index]});  //create an array of objects and insert them to coObj array
       })

       canvas.addEventListener('mousemove', function(event){

            var xpos=event.clientX-this.offsetLeft;  //here this refers to current canvas object
            var ypos=event.clientY-this.offsetTop;


            for(i=0;i<coObj.length;i++){
                 if(xpos==coObj[i].x && ypos==coObj[i].y){  // check for possible co-ordinate match
                     alert('coOrdinate found !!');
                     ctx.clearRect(0, 0, 1000, 1000);
                 }
            }
       });

Answer 2

首先，我们需要像这样从您的事件处理程序中删除 ctx：

canvas.addEventListener

然后我将使用 mousemove 事件处理程序：

//This is to get the position of the canvas to (better) accurately
//reflect the mouse coordinates assumes NOT nested in a div or wrapper

var canvasPos = {
    x: canvas.offsetLeft,
    y: canvas.offsetTop
 };

canvas.addEventListener('mousemove', function(e){

    var mousePoint = {
        x: e.pageX - canvasPos.x,
        y: e.pageY - canvasPos.y
    };

    if(mousePoint.x == 340 && mousePoint.y == 100){

       //do whatever it is you want your code to do

    }

});

我希望这对你有用，或者让你走上正轨！！这是一个工作示例：http://jsfiddle.net/fiddle_me_this/k7drc29b/

Canvas 当鼠标悬停在特定坐标上时激活事件

Canvas make event activate when mouseover specific coordinate

html

javascript

canvas

mouseover

event-listener