Draw a circular multi-angle Pattern Based on html5, and draw a multi-angle Pattern Based on html5

Draw a circular multi-angle Pattern Based on html5, and draw a multi-angle Pattern Based on html5

Let's take a look at the simplest:

The Code is as follows:

Copy the content to the clipboard using JavaScript Code

1. Var canvas = document. getElementById ('My), ctx = canvas. getContext ('2d ');
2. SetInterval (function (){
3. Ctx. clearRect (0, 0, 400,400 );
4. Ctx. save ();
5. Ctx. translate (200,200 );
6. Var ci = 90, pi = Math. PI/ci, x1 = 100, y1 = 0, x2 = 0, y2 = 0, x3 = 0, y3 = 0;
7. Ctx. beginPath ();
8. For (var I = ci * 2; I> 0; I --){
9. Ctx. rotate (pi );
10. Ctx. moveTo (x1, y1 );
11. Y2 = x1 * Math. sin (pi );
12. X2 = x1 * Math. cos (pi );
13. X3 = (x1-x2)/2 + x2 + 10 + Math. random () * 20;
14. Y3 = y2/2;
15. Ctx. lineTo (x3, y3 );
16. Ctx. lineTo (x2, y2 );
17. }
18. Ctx. stroke ();
19. Ctx. restore ();
20. },100 );

On the basis of the polygon above, we will go further:

The Code is as follows:

Copy the content to the clipboard using JavaScript Code

1. Var canvas = document. getElementById ('My), ctx = canvas. getContext ('2d '), r = 10;
2. SetInterval (function (){
3. Ctx. clearRect (0, 0, 400,400 );
4. Ctx. save ();
5. Ctx. translate (200,200 );
6. Var grad = ctx. createRadialGradient (0, 0, 0, 0, r + 20 );
7. Grad. addColorStop (0.2, 'white ');
8. Grad. addColorStop (0.7, 'yellow ');
9. Grad. addColorStop (0.8, 'Orange ');
10. Ctx. beginPath ();
11. Ctx. fillStyle = grad;
12. Ctx. arc (0, 0, r, 0, Math. PI * 2, true );
13. Ctx. fill ();
14. Var ci = 90, pi = Math. PI/ci, x2 = 0, y2 = 0, x3 = 0, y3 = 0;
15. X1 = 100;
16. Y1 = 0;
17. Ctx. beginPath ();
18. For (var I = ci * 2; I> 0; I --){
19. Ctx. rotate (pi );
20. Ctx. moveTo (r, 0 );
21. Y2 = r * Math. sin (pi );
22. X2 = r * Math. cos (pi );
24. X3 = (r-x2)/2 + x2 + 10 + Math. random () * 20;
25. Y3 = y2/2;
27. Ctx. lineTo (x3, y3 );
28. Ctx. lineTo (x2, y2 );
29. }
30. Ctx. fill ();
31. Ctx. restore ();
32. R <= 100 & (r + = 2 );
33. },100 );

The above is all the content of this article, hoping to help you learn.