Canvas draw simple animation, canvas draw

Canvas draw simple animation, canvas draw

It is relatively easy to create an animation in the canvas. It is actually a process of changing coordinates, erasure, and re-painting.

1. Use the setInterval method to set the animation interval.

SetInterval (code, millisec) setInterval method inherent in html, this method accepts two parameters, the first function represents the function that executes the animation, the second parameter is the interval, the Unit is (MS ).

2. functions used for drawing

1) The animation effect is realized by constantly changing the coordinates of X and Y.

2) use the clearRect method to erase the entire or local canvas.

ClearRect:

Context. clearRect (x, y, width, height );

X refers to the abscissa of our starting point, y refers to the ordinate of our starting point, width refers to the length of the wiping sub, and height refers to the height of the wiping sub.

 

<! DOCTYPE html> 
 
Var context; var I, j; var width, height; function draw (id) {var canvas = document. getElementById (id); context = canvas. getContext ('2d '); width = canvas. width; height = canvas. height; context. fillStyle = 'green'; context. fillRect (100, width, height); setInterval (painting,); I = 0; j = 0;} function painting () {// Example 1: // context. fillStyle = 'red'; // context. fillRect (I, I, 10, 10); // context. fillRect (I, 200-j, 10, 10); // I ++; // j ++; // Example 2: context. fillStyle = 'white'; context. clearRect (I, 20, 1, 10); I ++ ;}