分享

canvas变幻线效果demo

 pengphie 2016-10-23
复制代码
<!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>
复制代码

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约