HTML5 Canvas Brilliant Small ball detailed

Example Description:

• Example uses Html5+css+javascript to achieve a small ball's motion effect
• Master the basic usage of canvas

Technical points:

• Analyze the function of demo to be realized from requirement
• Good at using the HTML5 Canvas reference manual

Mainly divided into two parts:

1. Static layout: The design of the ball, including the position of the ball, color, size and size changes, such as the initialization of the ball function, rendering function, update function
2. Dynamic body: variable, array definition, small ball display time, mouse movement trigger ball motion function

Code section:

Canvas label, which provides a drawing

JS logic: Static Ball

where the _init () function is designed to change the position, color, speed, size, and size of the ball, the render () function draws a small ball, and the update () function changes smaller spheres

JS Logic: Dynamic Design

var canvas = document.getElementById ("Canvas"); Get the canvas element

Layout of the canvas:

var ctx = Canvas.getcontext ("2d"); The environment used to draw on the canvas, the environment object is returned, the parameter represents the type drawn on the canvas, and "2d" represents a two-dimensional drawing.

Move the mouse to trigger the time limit of the ball display:

To bind a mouse move event:

Dynamically Design All code:

：

Note: This example uses a JavaScript utility library, underscore, which provides functionality similar to Prototype.js, but does not inherit any JavaScript built-in objects. It makes up for some of the features that jquery does not realize, and is an essential part of backbone.js.

HTML5 Canvas Brilliant Small ball detailed