向 canvas 添加事件監聽器？

Question

我看過與此類似的帖子，並觀看了一些教程，但我無法讓我的 canvas 擁有事件偵聽器。 這是我所擁有的：

<canvas id="ctx" width="599" height="575" style="border:1px solid #000000;"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.addEventListener('mousedown',onDown,false);
function onDown(event){
console.log("click");
};
ctx.font = "normal 20pt Pixelate";
ctx.fillStyle= "gray";
ctx.fillRect  (0,0, 700, 700);
</script>

那么我該如何添加呢？ 在此之后我有一個指向外部 js 腳本的鏈接，它需要引用單擊來更改變量，但即使將事件偵聽器放在那里，它位於 canvas 的聲明之后，仍然無法建立它。 瀏覽器說 ctx.addEventListener 不是 function。

Answer 1

事件監聽器應該應用於HTMLCanvasElement （實際的 DOM 元素）而不是RenderingContext 。

例如，這將使您的樣本工作：

var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
canvas.addEventListener('mousedown',onDown,false);

資料來源：

• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget