Question

我目前在<canvas>标记中有两个圈子，其中包含HTML5＆amp;的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

技术上没有办法在画布绘制的形状上注册鼠标事件。但是，如果您使用像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

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

Answer 3

没有“内置”方式来跟踪画布上绘制的形状。它们不被视为对象，而只是区域中的像素。如果要处理在画布上绘制的形状上的事件，则需要跟踪每个形状覆盖的区域，然后根据鼠标位置确定触发事件的形状。
如果您想用其他形状替换它，您可以绘制其他形状。您可能需要查看globalCompositeOperation。

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

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

基本上，你现在所做的事实上不是画布的预期目的或用途。这就像用铅笔钉在钉子上 - 你正在使用错误的工具来完成工作。

Answer 4

虽然您无法为画布上绘制的对象创建单击事件，但有一种解决方法：将画布包装在DIV标记中，然后将图像添加到CANVAS标记上方的DIV标记内。

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

然后使用CSS来使图像位置：绝对并使用左：* 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引擎中完成的方式。

画布图像和Click事件

5 个答案: