HTML5 label canvas for animation,

HTML5 label canvas for animation,
Abstract:

Canvas allows you to draw images, and naturally you can make animations, because each frame of an animation is an image. We can use the setInterval function of javascript to achieve the animation effect.

The following is an example in which the circle is continuously circled around the center of the red dot.

Code:

1 <canvas id = "myCanvas" width = "300" height = "300"> 2 your browser does not support canvas! 3 </canvas> 4 <script> 5 var canvas = document. getElementById ('mycanvas '); 6 if (canvas. getContext) {7 var context = canvas. getContext ('2d '); 8 var posX = 100, 9 posY =, 10 flag = true; 11 12 setInterval (function () {13 14 context. fillStyle = "# ccc"; 15 context. fillRect (0, 0, canvas. width, canvas. height); 16 context. beginPath (); 17 context. fillStyle = "white"; 18 19 context. arc (posX, posY, 20, 0, Math. PI * 2, true); 20 context. closePath (); 21 context. fill (); 22 23 console. log (posX + "," + posY); 24 if (flag & posX <201) {25 posX + = 1; 26} else {27 posX-= 1; 28 flag = false; 29 if (posX <100) {30 flag = true; 31} 32} 33 if (flag) {34 posY = 150-Math.sqrt (2500-Math.pow (posX-150, 2); 35} else {36 posY = 150 + Math. sqrt (2500-Math.pow (posX-150, 2); 37} 38 39 context. beginPath (); 40 context. arc2 (150,150, 2, 0, Math. PI * 2, true) 41 context. fillStyle = "red"; 42 context. fill (); 43 44}, 50); 45} 46 </script>