Question

我不确定我是否正在使用鼠标事件，因为这是我第一次使用它。我想要做的是，如果我将鼠标悬停在我绘制的一个物体上，我想要显示一个模糊信息，说明它是哪个城市，人口和市中心的形象等。

<script>
function startCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  //first circle
  var one = c.getContext("2d");
  //second circle
  var two = c.getContext("2d");
  //third cirle
  var three = c.getContext("2d");
  //fourth circle
  var four = c.getContext("2d");
  //fifth cirle
  var five = c.getContext("2d");
  // new image
  var image = new Image();
  image.onload = function () {
    ctx.drawImage(image, 69, 50);
    //draw a circle
    one.beginPath();
    one.arc(180, 90, 10, 0, Math.PI * 2, true);
    one.closePath();
    one.fill();
    two.beginPath();
    two.arc(155, 138, 10, 0, Math.PI * 2, true);
    two.closePath();
    two.fill();
    three.beginPath();
    three.arc(160, 180, 10, 0, Math.PI * 2, true);
    three.closePath();
    three.fill();
    four.beginPath();
    four.arc(257, 210, 10, 0, Math.PI * 2, true);
    four.closePath();
    four.fill();
    five.beginPath();
    five.arc(238, 235, 10, 0, Math.PI * 2, true);
    five.closePath();
    five.fill();
  };
  image.src = 'denmark.jpg';
  //function hover over circle one, give alert
  var startlisten = new mouseEvent.Listen({canvas:document.getElementById('myCanvas')});
  var circle = new mouseEvent.Register({
    type: 'mouseover',
    name: 'test',
    x: [180],
    y: [90],
    callback: function () { alert('this is a test'); }
  });
  startlisten.add(test);
}
</script>
</head>
<body onload="startCanvas()">
  <canvas id="myCanvas" width="600" height="600";">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
</body>
</html>

Answer 1

你的问题是这段代码：

var startlisten = new mouseEvent.Listen({canvas:document.getElementById('myCanvas')});
var circle = new mouseEvent.Register({
    type: 'mouseover',
    name: 'test',
    x: [180],
    y: [90],
    callback: function () { alert('this is a test'); }
});

这不是本机JS。试试这个：

c.addEventListener( // Since your code defince `c` as `document.getElementById("myCanvas")`
    'mouseover',
    function(e){
        e = e || window.event;
        alert('this is a test');
    }
);

我的mouseEvent无法正常工作

1 个答案: