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

This article will explain in detail how to use HTML5 Canvas to make keyboard and mouse animation. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Keyboard controls the movement of the ball

As we all know, the animation we see is actually a series of static pictures that switch quickly, so that the visual effect of "the picture is moving" is produced by the naked eye because of the visual remnants. Once you understand this, it is relatively easy to draw animation effects on canvas. We just need to clear a static graph first, and then redraw it in another location, so repeatedly, let the static graph move according to a certain trajectory, we can produce animation effect.

Next, we draw a solid ball on canvas, and then use the arrow keys on the keyboard to control the movement of the ball to produce a dynamic effect. The sample code is as follows:

JavaScript Code copies content to the clipboard

Html >

An example of getting started with html5?canvas drawing a movable ball

Your browser does not support canvas tags.

/ / get Canvas object (canvas)

Var?canvas?=?document.getElementById ("myCanvas")

/ / A class that represents a sphere

Function?Ball (x, Magneol, radius, and speed) {

This.x?=?x? | |? 10. The x coordinate of the sphere. Default is 10.

This.y?=?y? | |? 10. The y coordinate of the sphere. Default is 10.

This.radius?=?radius? | |? 10. The radius of the sphere. Default is 10.

This.speed?=?speed? | |? 5 handle / ball movement speed. Default is 5.

/ / move up

This.moveUp?=?function () {

This.y?-=?this.speed

If (this.y?

/ / prevent the upper boundary from being exceeded

This.y?=?this.radius

}

}

/ / move to the right

This.moveRight?=?function () {

This.x?+=?this.speed

Var?maxX?=?canvas.width?-?this.radius

If (this.x? >? maxX) {

/ / prevent the right boundary from being exceeded

This.x?=?maxX

}

}

/ / move left

This.moveLeft?=?function () {

This.x?-=?this.speed

If (this.x?

/ / prevent the left boundary from being exceeded

This.x?=?this.radius

}

}

/ / move down

This.moveDown?=?function () {

This.y?+=?this.speed

Var?maxY?=?canvas.height?-?this.radius

If (this.y? >? maxY) {

/ / prevent the lower boundary from being exceeded

This.y?=?maxY

}

}

}

/ / draw the ball

Function?drawBall (ball) {

If (typepeople, people, ctxboys)? "undefined") {

Ctx.beginPath ()

Ctx.arc (ball.x,?ball.y,?ball.radius,?0,?Math.PI?*?2,?false)

Ctx.fill ()

}

}

/ / empty the canvas canvas

Function?clearCanvas () {

If (typepeople, people, ctxboys)? "undefined") {

Ctx.clearRect (0, 0, 400, 400, 300)

}

}

Var?ball?=?new?Ball ()

/ / simply detect whether the current browser supports Canvas objects to avoid prompting syntax errors in some browsers that do not support html5

If (canvas.getContext) {

/ / get the corresponding CanvasRenderingContext2D object (brush)

Var?ctx?=?canvas.getContext ("2d")

DrawBall (ball)

}

/ / callback handler for onkeydown event

/ / Control the movement of the ball according to the user's button

Function?moveBall (event) {

Switch (event.keyCode) {

Case?37:// left arrow key

Ball.moveLeft ()

Break

Case?38:// up key

Ball.moveUp ()

Break

Case?39:// right arrow key

Ball.moveRight ()

Break

Case?40:// Down Arrow

Ball.moveDown ()

Break

Default:// other keystroke operations do not respond

Return

}

ClearCanvas (); / / empty the canvas first

DrawBall (ball);? / / draw the latest ball again

}

On "how to use HTML5 Canvas to make keyboard and mouse animation" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.