1

我目前在<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>用另一个替换图像时如何清理/删除图像？

4

5 回答 5

2

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

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

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

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

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

于 2012-06-23T18:55:03.290 回答
1

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

于 2012-06-23T18:56:31.317 回答
1

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

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

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

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

基本上，您现在所做的实际上并不是画布的预期目的或用途。这就像用铅笔敲钉子一样——你使用了错误的工具来完成这项工作。

于 2012-06-23T19:00:13.763 回答
0

虽然您确实无法为画布上绘制的对象创建单击事件，但有一种解决方法：将画布包裹在 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");
});
于 2013-04-19T17:30:33.600 回答
0

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

objectsUnderPoint( x, y );

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

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

于 2014-07-23T18:02:51.183 回答