用過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(); }
不想那麼單調放水平，也可以這樣有弧度：
有了它以後想做什麼(神馬)都可以! -/-