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  阅读(1657)  评论(1)  编辑  收藏  举报

导航

百度流量统计：