canvas霓虹灯

最新推荐文章于 2024-04-02 14:43:19 发布

kingchanW

最新推荐文章于 2024-04-02 14:43:19 发布

阅读量766

点赞数

文章标签： canvas霓虹灯

本文链接：https://blog.csdn.net/kingchanW/article/details/53556378

版权

<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>