HTML5 drawing animation

draw animation

While the canvas API doesn't directly provide a way to support animations, implementing animations in canvas itself is simple: just keep updating and redrawing the canvas. This continuous update and redraw is called the animation loop, and it is the core logic of all animations.

To implement animation in canvas, you first need to initialize the objects on the canvas. Then, start an animation loop to update the canvas, clear the canvas, repaint the canvas, and request the next new animation frame. The basic principle of Canvas animation is shown in Figure 4‑36:

Figure 4-36 Basic principles of canvas animation

Next, let's take a look at the implementation process of canvas animation through a simple example. This instance implements a rotating gossip diagram in an animated way. code show as below:

1. function clear() {  
2.    context.clearRect(0, 0, canvas.width, canvas.height);
3. }
5. function rotate() {
6.    context.rotate(Math.PI/30);  // 每分钟旋转一周
7. }
9. function draw () {
10.     // 绘制白色半圆
11.    context.beginPath();
12.    context.arc(0, 0, 80, 1.5*Math.PI, Math.PI/2, false);
13.    context.fillStyle = "white";
14.    context.closePath();
15.    context.fill();
16.            
17.    // 绘制黑色半圆
18.    context.beginPath();
19.    context.arc(0, 0, 80, Math.PI/2, 1.5*Math.PI, false);
20.    context.fillStyle = "black";
21.    context.closePath();
22.    context.fill();
23.            
24.     // 绘制黑色小圆
25.     context.beginPath();
26.     context.arc(0, 40, 40, 0, Math.PI*2, true);
27.     context.fillStyle = "black";
28.     context.closePath();
29.     context.fill();
30.            
31.     // 绘制白色小圆
32.     context.beginPath();
33.     context.arc(0, -40, 40, 0, Math.PI*2, true);
34.     context.fillStyle = "white";
35.     context.closePath();
36.     context.fill();
37.            
38.     // 绘制白色小圆心
39.     context.beginPath();
40.     context.arc(0, -40, 5, 0, Math.PI*2, true);
41.     context.fillStyle = "black";
42.     context.closePath();
43.     context.fill();
44.            
45.     // 绘制黑色小圆心
46.     context.beginPath();
47.     context.arc(0, 40, 5, 0, Math.PI*2, true);
48.     context.fillStyle = "white";
49.     context.closePath();
50.     context.fill();
51. }
53. function drawStage() {
54.      rotate();  // 更新
55.      clear();   // 清除
56.      draw();    // 重绘
57. }
59. window.onload = function(){
60.     canvas = document.getElementById('canvas');
61.     context = canvas.getContext('2d');
62.           
63.     context.translate(canvas.width/2, canvas.height/2);
64.           
65.     setInterval(drawStage, 100);
66. };

The above code, when the page is loaded, first initializes, and then calls the setInterval(drawStage, 100) method to start the animation loop. In the animation loop, the drawStage () function is called every 100ms to update the canvas, clear the canvas, Repaint the action of the canvas for animation effects. The running result is shown in Figure 4-37:

Figure 4-37 Rotated Bagua Diagram

Of course, this is just to demonstrate the principle of implementing animation, so the example is relatively simple. In fact, animations in Canvas can be simple or complex. Simple or complex, the basic principles are exactly the same.

About the author

Mr. Crooked neck , more than 15 years of software development experience, loves web development, proficient in HTML, CSS, JavaScript, jQuery, JSON, Python, Less, Bootstrap, etc., author of " HTML Collection ", " Demystifying CSS ", " Less Concise Tutorial " ", " JSON Tutorial ", " Bootstrap2 User Guide ", and all open source on GitHub .

Copyright statement : This article is from  the " HTML Collection " of Waibowang . You are welcome to read it online and give your valuable opinions.