javascript - Canvas 图像和点击事件

Question

我目前在 <canvas> 中有两个圆圈使用 HTML5 和 JavaScript 标记。

现在我正在尝试添加一个图像(完成)，该图像会根据鼠标悬停和点击而变化。

它基本上是一个播放/暂停按钮的实现，当用户将鼠标悬停在按钮上时，它会发生额外的颜色变化。

我似乎无法弄清楚事件是如何作用于 HTML5 中的形状的，因为它们不是对象......这是我目前的代码:

window.onload = function() {

      var canvas = document.getElementsByTagName('canvas')[0];
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;


      //Outer circle
      context.beginPath();  
      context.arc(centerX, centerY, 150, 0, Math.PI * 2, false);
      context.fillStyle = "#000";
      context.fill();
      context.stroke();

      //Inner cicle
      context.beginPath();
      context.arc(centerX, centerY, 75, 0, Math.PI * 2, false);
      context.fillStyle = "#fff";
      context.fill();
      context.stroke();

      //Play / Pause button
      var imagePlay = new Image();
      var imageHeight = 48/2;
      imagePlay.onload = function() {
        context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight);
      };
      imagePlay.src = "images/play.gif";

}

1. 如何处理使用 <canvas> 创建的形状上的事件?

2. 如何清理/删除 <canvas> 上的图像何时更换？

Answer 1

技术上无法在 Canvas 绘制的形状上注册鼠标事件。但是，如果您使用像 Raphael (http://raphaeljs.com/) 这样的库，它可以跟踪形状位置，从而确定哪个形状正在接收鼠标事件。这是一个例子:

var circle = r.circle(50, 50, 40);

circle.attr({fill: "red"});

circle.mouseover(function (event) {
    this.attr({fill: "red"});
});

如您所见，这种方式非常简单。对于修改形状，这个库也会派上用场。没有它，您将需要记住每次进行更改时如何重新绘制所有内容