HTML5 Canvas mouse and keyboard event demo

Comments: The main role of this article is to demonstrate HTML5 Canvas mouse events, get the mouse coordinates on the Canvas object, and demonstrate how to control the movement of objects on the Canvas through the keyboard, if you are interested, refer to the following: I hope you can help demonstrate the HTML5 Canvas mouse event, get the mouse coordinates on the Canvas object, and demonstrate that the keyboard event controls the movement of objects on the Canvas through the keyboard.

The Canvas object supports all JavaScript Mouse events, including Mouse clicks, Mouse Down, Mouse Up, and Mouse Move) you can add a mouse event to a Canvas in either of the following ways:

The Code is as follows:
// Mouse event
Canvas. addEventListener ("mousedown", doMouseDown, false );
Canvas. addEventListener ('mousemove ', doMouseMove, false );
Canvas. addEventListener ('mouseup', doMouseUp, false );
Another method is called anti-pattern in JavaScript:


The Code is as follows:
Canvas. onmousedown = function (e ){
}
Canvas. onmouseup = function (e ){
}
Canvas. onmousemove = function (e ){
}

Get the coordinates of the mouse over the Canvas object:
Because the coordinates of the mouse on the Canvas cannot be obtained directly from the mouse event on the Canvas
The coordinates of the screen. Therefore, the mouse event e. pageX and e. pageY are used to obtain the mouse position, and then
Canvas. getBoundingClientRect () to obtain the relative position of the Canvas object to the screen.

Get the coordinates of the mouse on the Canvas. The Code is as follows:

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 does not support keyboard event monitoring and acquisition. There are two common methods to solve this problem:

I. Canvas keyboard event monitoring and handling through windows objects
// Key event-use window as object
Window. addEventListener ('keylow', doKeyDown, true );

2. Add other DOM elements that support Keyboard Events to the Canvas object to support Keyboard Events.

The Code is as follows:
<Canvas id = "event_canvas" tabindex = "0"> </canvas>
// Key event-use DOM element asobject
Canvas. addEventListener ('keylow', doKeyDown, true );
Canvas. focus ();

Tabindex is an HTML5 DOM element and supports Keyboard Events.
Demonstration: a rectangle that can be moved from top to bottom of the keyboard:
 
A complete DEMO code for mouse and keyboard events is as follows:

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 ('keylow', doKeyDown, true );
Canvas. focus ();
// Key event-use window as object
Window. addEventListener ('keylow', 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
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.tar get;
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.tar get;
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 section:

The Code is as follows:
<Body>
<H1> HTML Canvas Event Demo-By Gloomy Fish <Pre> Press W, A, S, D keys to move </pre>
<Div id = "my_painter">
<Canvas id = "event_canvas" tabindex = "0"> </canvas>
</Div>
</Body>