Question

所以我想做的就是当我将画布鼠标悬停在某处（340x，100y）时，它会运行我告诉它在里面做的任何事情。

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

我所拥有的就是上面的内容，而且我不知道如何使用特定的坐标。

另外，虽然我正在研究它，但我怎么能做同样的事情，但整个阵列呢？

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

Answer 1

您可以使用clientX和clientY属性来检测坐标。如果您希望在鼠标悬停（400,400）时使用画布做某事，可以使用clinetX / clientY进行操作;

我怎么能让同样的事情发生，但整个数组

如果您想使用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/

鼠标悬停特定坐标时，画布会激活事件

2 个答案: