HTML5 Canvas mouse and keyboard events demo example_html5 tutorial skills

Demonstrates HTML5 Canvas mouse events, obtains mouse coordinates on the Canvas object, and demonstrates keyboard events to control the movement of objects on the Canvas through the keyboard.

The Canvas object supports all JavaScript mouse events, including mouse click (MouseClick), mouse press (Mouse Down), mouse lift (Mouse Up), mouse move (Mouse Move). Add mouse events to Canvas There are two ways, one way is to complete it through API:

Copy the code

The code is as follows:

// mouse event
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener('mousemove', doMouseMove,false);
canvas.addEventListener('mouseup ', doMouseUp, false);
Another way is called an anti-pattern in JavaScript:

Copy code

The code is as follows:

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

Get the coordinates of the mouse on the Canvas object:
Since the coordinates of the mouse on the Canvas cannot be directly obtained in the mouse event on the Canvas, so What is obtained is based on the coordinates of the entire
screen. Therefore, the mouse position is obtained through the mouse events e.pageX and e.pageY, and then the relative position of the Canvas object relative to the screen is obtained through
Canvas.getBoundingClientRect(), and the coordinates of the mouse in the Canvas are obtained by calculating

, the code is as follows:

Copy code

The code is as follows:

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

Keyboard events:
HTML5 Canvas itself does not support keyboard event monitoring and acquisition. There are two commonly used ones Methods to solve this problem:

1: Implement Canvas keyboard event monitoring and processing through windows objects
// key event - use window as object
window.addEventListener('keydown', doKeyDown, true);

Two: Implement keyboard event support by adding other DOM elements that support keyboard events on the Canvas object

Copy code

The code is as follows:

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

where tabindex is an HTML5 DOM element and supports keyboard events.
Demo, a rectangular block that can move up, down, left and right according to the keyboard:

A complete mouse and keyboard event demonstration code is as follows:

Copy code

The code is as follows:

var tempContext = null; // global variable 2d context
var started = false;
var mText_canvas = null;
var x = 0, y =0;
window.add
window.onload = function() {
var canvas = document.getElementById("event_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw rectangel
tempContext = canvas.getContext("2d");
tempContext.fillStyle="blue";
x = canvas.width/2;
y = canvas.height/2;
tempContext.fillRect(x, y, 80, 40);
// key event - use DOM element as object
canvas.addEventListener('keydown', doKeyDown, true);
canvas.focus();
// key event - use window as object
window.addEventListener('keydown', doKeyDown, true);
// mouse event
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.addEventListener('mouseup', doMouseUp, false);
}
function getPointOnCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.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) { // up arrow and W
clearCanvas();
y = y - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // right arrow and D
clearCanvas();
x = x 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // down arrow and S
clearCanvas();
y = y 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // left arrow and 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 = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("mouse down at point( x:" loc.x ", y:" loc.y ")");
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
started = true;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (started) {
tempContext.lineTo(loc.x, loc.y);
tempContext.stroke();
}
}
function doMouseUp(event) {
console.log("mouse up now");
if (started) {
doMouseMove(event);
started = false;
}
}

HTML部分：

复制代码

代码如下:

HTML Canvas Event Demo - By Gloomy Fish

Press W, A, S, D keys to move