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>
本文網址:http://blog.tonycube.com/2012/03/html5-canvas-7.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。