HTML5 clicable canvas元素？

Question

我正在畫布上創建一個圓圈。 是否可以使我的圈子可點擊？

function createCircle(context, x, y, radius, color) {
   context.beginPath();
   context.fillStyle = color;
   context.arc(x, y, radius, 0, Math.PI * 2, true);
   context.closePath();
   context.fill();
}

Answer 1

我不是專家，但我認為你應該在canvas上捕獲click事件，然后編寫一個function來檢查點擊的點是否在圓弧半徑內。 （即，點擊的點和圓形原點之間的差異小於或等於半徑）。

Answer 2

您可以將mousedown事件添加到畫布中，或者只是添加事件偵聽器

canvas.addEventListener('mousedown', function(evt) 
{
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        //Here ur getting mouse position x and y coordinates. 
  },
 false);

Answer 3

你當然可以。 如果您想將光標更改為手（它在鏈接上的方式），您也可以這樣做。 只需在畫布上添加一個onmousemove事件，如果鼠標與中心的距離（您可能必須使用畢達哥拉斯）小於半徑，則將畫布的光標CSS屬性更改為指針。 否則，當然，將CSS屬性返回到默認值。 同樣，添加一個onclick事件，並檢測它何時被點擊，並在它確實時執行。 因此，您的畫布中有一個可點擊的圓圈。