Shulou(Shulou.com)06/03 Report--

What this article shares to you is the example analysis of the HTML5 Canvas mouse and keyboard event demo. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it.

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 click (MouseClick), mouse down (Mouse Down), mouse up (Mouse Up), and mouse movement (Mouse Move). There are two ways to add mouse events to Canvas. One way is through API:

The code is as follows:

/ / mouse event

Canvas.addEventListener ("mousedown", doMouseDown,false)

Canvas.addEventListener ('mousemove', doMouseMove,false)

Canvas.addEventListener ('mouseup', doMouseUp, false)

Another approach 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 mouse coordinates on the Canvas object:

Since the mouse event on Canvas cannot directly obtain the coordinates of the mouse in the Canvas, what is obtained is based on the entire

Coordinates of the screen. So get the mouse position through the mouse events e.pageX and e.pageY, and then use the

Canvas. GetBoundingClientRect () to get the relative position of the Canvas object relative to the screen, by calculating

Get the coordinates of the mouse in 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 bbox.top * (canvas.height / bbox.height)

}

}

Keyboard event:

HTML5 Canvas itself does not support keyboard event monitoring and acquisition, and there are two common methods to solve this problem:

One: to monitor and handle Canvas keyboard events through windows objects.

/ / key event-use window as object

Window.addEventListener ('keydown', doKeyDown,true)

Second, keyboard event support is realized by adding other DOM elements that support keyboard events to the Canvas object.

The code is as follows:

/ / key event-use DOM element asobject

Canvas.addEventListener ('keydown', doKeyDown,true)

Canvas.focus ()

Where tabindex is a HTML5 DOM element and supports keyboard events.

Demonstrate a rectangular block that can move left and right according to 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 [XSS _ clean] .clientWidth)

Canvas.width = canva [XSS _ clean] .clientWidth

Canvas.height = canva [XSS _ clean] .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 section:

The code is as follows:

HTML Canvas Event Demo-By Gloomy Fish

Press W, A, S, D keys to move

The above is an example analysis of the HTML5 Canvas mouse and keyboard event demo. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.