HTML5 Canvas滑鼠與鍵盤事件demo範例_html5教學技巧

示範HTML5 Canvas滑鼠事件，取得Canvas物件上的滑鼠座標，示範鍵盤事件透過鍵盤控制Canvas上物件移動。

Canvas物件支援所有的JavaScript的滑鼠事件，包括滑鼠點擊(MouseClick), 滑鼠按下(Mouse Down), 滑鼠抬起(Mouse Up),滑鼠移動( Mouse Move)對Canvas新增滑鼠事件方式有兩種，一種方式是透過API來完成：

複製程式碼

程式碼如下:

程式碼如下:


// mouse event
canvas.addEventListener("mousedown",doMouseDown,false);

canvas.addEventListener('mousemove', doMouseMove,false)； ', doMouseUp, false);
另外一種方式在JavaScript中稱為反模式：

複製代碼

代碼如下:


canvas.onmousedown = function(e){
}
canvas.onmouseup = function(e){
}

canvas.onmousemove = function(e){
}


取得滑鼠在Canvas物件上座標：
由於Canvas上滑鼠事件中無法直接取得滑鼠在Canvas的座標，所獲取的都是基於整個
螢幕的座標。所以透過滑鼠事件e.pageX與e.pageY來取得滑鼠位置，然後透過
Canvas. getBoundingClientRect()來取得Canvas物件相對螢幕的相對位置，透過計算

得到滑鼠在Canvas的座標，程式碼如下：

複製程式碼

程式碼如下:



程式碼如下:

var bbox =canvas.getBoundingClientRect();
return { x: x- bbox.left *(canvas.width / bbox.width),
y:y - bbox.top * (canvas.height / bbox.height)
};
}


鍵盤事件：
HTML5 Canvas本身不支援鍵盤事件監聽與獲取，常用的有兩種方法來解決這個問題：

一：透過windows物件來實作Canvas鍵盤事件監聽與處理

// key event - use window as object

window.addEventenerener('keydown', doKeyDown, true); 二：通過在Canvas對像上添加其它支持鍵盤事件的DOM元素實現鍵盤事件支持

複製代碼


代碼如下:

// key event - use DOM element asobject
canvas.addEventListener('keydown', doKeyDown,true); canvas.focus();


其中tabindex為HTML5 DOM元素，支援鍵盤事件。

示範，一個可以根據鍵盤上下左右移動的矩形塊:

 一個完整的滑鼠與鍵盤事件演示代碼如下：

複製程式碼程式碼如下:

var tempContext = null; // 全域變數2d 上下文
varstarted = false;
var mText_canvas = null;
var x = 0, y =0;
window.addo
window.onload = function() {
var canvas = document.getElementById("event_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.width = can..com .clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("不支援Canvas。請安裝HTML5相容的瀏覽器。");
回傳；
}
// 取得畫布的2D 上下文並繪製矩形
tempContext = canvas.getContext("2d");
tempContext.fillStyle="blue";
x = canvas.width/2;
y = canvas.height/2;
tempContext.fillRect(x, y, 80, 40);
// 按鍵事件- 使用DOM 元素作為物件
canvas.addEventListener('keydown', doKeyDown, true);
canvas.focus();
// 按鍵事件- 使用window 作為物件
window.addEventListener('keydown', doKeyDown, true) ;
// 滑鼠事件
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.> , doMouseUp, false);
}
function getPointOnCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bcanvasbox. .width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
function doKeyDown(e) {
var keyID = e.keyCode ? e.keyCode :e.which;
if(keyID === 38 || keyID === 87) { // 向上箭頭和W
clearCanvas();
y = y - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // 右箭頭與D
clearCanvas();
x = x 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault(); 🎜>}
if(keyID === 40 || keyID === 83) { // 向下箭頭和S
clearCanvas();
y = y 10;
tempContext.fillRect (x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // 左箭頭和A
clearCanvas();
x = x - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
}
}
function clearCanvas() {
tempContext.clearRect(0, 0, 500, 500)
}
function doMouseDown(event) {
var x =事件.pageX
; .pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("滑鼠放在點( x:" loc.x ", y :" loc.y ")");
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
開始=真;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointCanvas(canvas, xOn, y);
if (開始) {
tempContext.lineTo(loc.x, loc.y);
tempContext.中風();
}
}
function doMouseUp(event) {
console.log("滑鼠現在抬起");
if（開始）{
doMouseMove(事件);
開始=假;
}
}

HTML 部分：

複製程式碼

程式碼如下:;

HTML Canvas 活動示範- 作者：Gloomy Fish

按W、A、S、D 鍵移動

身體>