使用canvas能画各种各样的东西

用过canvas的人都知道，在这个画布上面可以制作各种各样的动画效果，想必大家都用过这个。

晒晒刚刚用这个做的一个demo：

现在来画一个圆看看:

demo.js:

var can,ctx,count = 1,w,h,i;

can = document.getElementById('can');
ctx = can.getContext('2d');

w = document.body.scrollWidth;
h = document.body.scrollHeight;
can.setAttribute('width',w)
can.setAttribute('height',h)
 // angle for   
    angle = Math.PI/2 * count;
    x = w/2 + Math.sin(angle);
    y = h/2 + Math.sin(angle);
    ctx.beginPath();
    
    ctx.arc(x,y ,h/6,0,2*Math.PI);
    ctx.fillStyle = '#3ff';
    ctx.strokeStyle = '#333';
    ctx.stroke();
    ctx.fill();

对应的.html：

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>demo</title>
  </head>
  <body bgColor='#000'>
    <canvas id="can"></canvas>
    <script src="js/demo.js"></script>
  </body>
</html>

这个太单调了，我们可以把angle这段代码循环一下，看看demo是什么效果？

demo.js:

for( i = 0; i <count;i++){
    angle = Math.random(Math.PI/2 * i);
    x = (w/3)*Math.sin(angle);
    y = h/3 + (1 + angle)*Math.sin(angle);
    ctx.beginPath();
    ctx.arc(2*x,y,h/8,0,2*Math.PI);
    ctx.fillStyle = '#3ff';
    ctx.strokeStyle = '#000';
    ctx.stroke();
    ctx.fill();
}

不想那么单调放水平，也可以这样有弧度：

有了它以后想做什么(神马)都可以! -/-