画布图像和点击事件

Question

我目前在带有 HTML5 和 JavaScript 的<canvas>标签中有两个圆圈。

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

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

我似乎无法弄清楚事件在 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

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

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

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

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

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

Answer 2

嗯 简单的答案是你不能。 您要么必须找到点击事件的坐标并计算您是否要执行某个选项，要么您可以使用区域和地图标签并用它覆盖画布元素。 要更改画布，请使用 clearRect 函数在所有内容上绘制一个矩形，然后重新绘制您想要的内容。

Answer 3

1. 没有“内置”方式来跟踪画布上绘制的形状。 它们不被视为对象，而只是一个区域中的像素。 如果要处理画布上绘制的形状的事件，则需要跟踪每个形状覆盖的区域，然后根据鼠标位置确定要为哪个形状触发事件。

2. 如果你想用其他东西替换它，你可以在其他形状上画画。 您可能想看看globalCompositeOperation 。

如果您想将绘图视为对象，我建议您使用SVG而不是画布。

另一种选择是使用按钮，然后使用 CSS 设置样式。

基本上，您现在所做的并不是画布的预期目的或用途。 这就像用铅笔敲钉子——你用错了工具。

Answer 4

虽然确实不能为在画布上绘制的对象创建点击事件，但有一个解决方法：将画布包裹在 DIV 标记中，然后在 CANVAS 标记上方的 DIV 标记中添加图像。

<div id="wrapper">
    <img src="img1.jpg" id="img1"></img>
    <canvas id="thecanvas"></canvas>
</div>

然后使用 CSS 使图像成为 position:absolute 并使用 left:*px 和 top:*px 属性将图像放置在通常绘制它的画布上。

#img1{
position:absolute;
left: 10px;
top: 10px;
 }

然后，您可以将点击事件添加到放置在画布上的图像，给人的印象是您正在点击画布（下面的示例使用 jQuery click() 函数）

$( "#img1" ).click(function(){
    alert("Thanks for clicking me");
});

Answer 5

您可以将光线投射到画布中，然后手动测试图像与光线的相交。 你应该像按下按钮一样看着它，然后将一束光线射入屏幕。 你应该写一个

objectsUnderPoint( x, y );

函数返回与射线在 x, y 处相交的所有图像的数组。

这是唯一真正正确的答案，这也是 3D 引擎中通常的做法。