一个完整的鼠标与键盘事件演示代码如下:

首頁 >web前端 >H5教程 >HTML5 Canvas滑鼠與鍵盤事件demo範例_html5教學技巧

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

WBOY
WBOY原創
2016-05-16 15:49:251425瀏覽

示範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 鍵移動




身體>

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn