HTML5 Canvas (7) - 事件

HTML 5 canvas

HTML5 Canvas 事件。

11. 事件

11.1 使用事件

事件：當發生什麼事件時，要做什麼。

在HTML中建立一個按鈕

<button id="myButton">Button</button>

在Javascript中使用事件

<script>
var btn;
window.onload = function() {
   btn = document.getElementById('myButton');
   btn.addEventListener('click', clickHandler, false);
}

function clickHandler(event) {
   alert('Button Click!');
   btn.removeEventListener('click', clickHandler, false);
}
</script>

要讓某個元件對某個事件做出回應，使用 addEventListener 來加入對該事件的偵聽，這個事件偵聽函式一定要有一個輸入參數，通常叫 event 。 click 則是事件名稱，表示當這個按鈕被按一下時，這個偵聽函式會做出回應。這裡是跳出訊息框 "Button Click!"，然後就把這個事件偵聽移除，所以這個按鈕按一次以後就沒反應了。

移除事件用 removeEventListener ，參數部份和 addEventListener 一模一樣。

11.2 滑鼠事件

接下來要對畫布加入滑鼠事件。這裡示範在滑鼠移動時取得座標值及滑鼠按下時的事件。 程式碼如下：

<script>
window.onload = function() {
    init();
}

var canvas, context;

function init() {
   canvas = document.getElementById('myCanvas');
   context = canvas.getContext('2d');
   //加入事件偵聽
   canvas.addEventListener('mousemove', mouseMoveHandler, false);
   canvas.addEventListener('mousedown', mouseDownHandler, false);
}

function mouseMoveHandler(event) {
   var msg = "Mouse position: " + (event.clientX - 10) + "," + (event.clientY - 10);
   show(msg);
}

function mouseDownHandler(event){
   var msg = "Mouse Down!";
   show(msg);
}

function show(msg) {
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.font = '20px Tahoma';
   context.fillStyle = "#1569C7";
   context.textAlign = "left";
   context.textBaseline = "bottom";
   context.fillText(msg, 100, 150);
}
</script>

本文網址：https://blog.tonycube.com/2012/03/html5-canvas-7.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀