canvas变幻线效果demo
课下做的一个小练习，老师出的题目，运行起来效果挺好看的，大家可以把代码粘走看看效果：
<!doctype html> <html> <head> <title>变幻线-by-@谢帅shawn</title> <meta charset='utf-8' /> </head> <body> <canvas height='560' width='1000' id='canvas'>您的浏览器不支持canvas！</canvas> <script> //全局变量 starx=Math.random()*canvas.width; stary=Math.random()*canvas.height; canvas=document.getElementById('canvas'); ctx=canvas.getContext('2d'); ctx.fillStyle='rgba(0,0,0,.08)'; ctx.lineWidth=5; ctx.lineJoin='round'; //int function int() { setInterval(render,30); } //render function render() { ctx.beginPath(); ctx.fillRect(0,0,canvas.width,canvas.height); ctx.moveTo(starx,stary); starx=Math.random()*canvas.width; stary=Math.random()*canvas.height; ctx.bezierCurveTo(Math.random()*canvas.width,Math.random()*canvas.height,Math.random()*canvas.width,Math.random()*canvas.height,starx,stary); var r=Math.round(Math.random()*255); var g=Math.round(Math.random()*255); var b=Math.round(Math.random()*255); ctx.strokeStyle='rgba('+r+','+g+','+b+',1)'; ctx.stroke(); } //onload=int window.onload=int; </script> </body> </html>
posted on 2012-07-26 16:08 shawn.xie 阅读(1652) 评论(1) 编辑 收藏 举报
