複製代碼


代碼如下:

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(事件);
開始=假;
}
}

身體>