标签：
用过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(); }
不想那么单调放水平，也可以这样有弧度：
有了它以后想做什么(神马)都可以! -/-
标签：
原文地址：http://www.cnblogs.com/hao5599/p/4617267.html
