canvas霓虹灯

来源：互联网发布：淘宝上的摩托车靠谱吗编辑：程序博客网时间：2024/05/29 03:38
<head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        #can1{            box-shadow: 0 0 10px yellow;        }    </style></head><body>    <canvas id="can1" width="600" height="600"></canvas>    <script type="text/javascript">        var can1 = document.getElementById('can1');        var ctx1 = can1.getContext('2d');        var color = ["gray", "green", "red", "palegoldenrod", "hotpink", "darkblue"];        function col(){            ctx1.fillStyle = color[0];            ctx1.fillRect(0, 0, 600, 600);            ctx1.fillStyle = color[1];            ctx1.fillRect(50, 50, 500, 500);            ctx1.fillStyle = color[2];            ctx1.fillRect(100, 100, 400, 400);            ctx1.fillStyle = color[3];            ctx1.fillRect(150, 150, 300, 300);            ctx1.fillStyle = color[4];            ctx1.fillRect(200, 200, 200, 200);            ctx1.fillStyle = color[5];            ctx1.fillRect(250, 250, 100, 100);        }        col();        setInterval(function (){            ctx1.clearRect(0,0,can1.width,can1.height);            var temp = color[0];            color[0] = color[1];            color[1] = color[2];            color[2] = color[3];            color[3] = color[4];            color[4] = color[5];            color[5] = temp;            col();        },100);    </script></body>
0 0