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