HTML5 Canvas mouse and keyboard events demo example_html5 tutorial skills

WBOY

Release： 2016-05-16 15:49:25

Original

1435 people have browsed it

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: