canvas实现随机画线的功能
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2016-05-04 23:09:07
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
<!doctype html> <html> <head> <title>变幻线</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>