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>
