畫布圖像和點擊事件

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 引擎中通常的做法。