基于html5绘制圆形多角图案

先看看最简单的效果图：

代码如下：

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);  

在上面多角形的基础上进一步之后为：

代码如下：

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,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);   

23.   
24.   

    x3 = (r - x2) /2+ x2 +10+ Math.random() *20;   

25.   

    y3 = y2 /2;   

26.   
27.   

    ctx.lineTo(x3,y3);   

28.   

    ctx.lineTo(x2,y2);   

29.   

    }   

30.   

    ctx.fill();   

31.   

    ctx.restore();   

32.   

    r <=100&& (r +=2);   

33.  

    },100);   

34.   

以上就是本文的全部内容，希望对大家的学习有所帮助。