canvas 万花筒

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #myCanvas1 {
                background-color: beige;
            }
        </style>
    </head>

    <body>
        <canvas id="myCanvas1" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var can = document.getElementById("myCanvas1");
        var pen = can.getContext("2d");

        function getRandomColor() {
            return '#' + Math.floor(Math.random() * 16777215).toString(16);
        }

        var num = 0;
        var x = 150;
        var y = 150;
        var a = 30;

        var arr = [];
        var color;
        setInterval(function() {
            color = getRandomColor();
            arr.push([x, y, a, num, color]);
        }, 600);

        var timer1 = null;
        timer1 = setInterval(function() {
                //小方块的变化
                pen.clearRect(0, 0, can.width, can.height);
                for(var i = 0; i < arr.length; i++) {
                    arr[i][0] *= 0.995;
                    arr[i][1] *= 0.997;
                    arr[i][2] *= 0.997;
                    arr[i][3] += 1;
                    bianliang(arr[i][0], arr[i][1], arr[i][2], arr[i][3], arr[i][4]);
                }
            }, 100)
            //画小方块
        function bianliang(x, y, a, num, color) {
            pen.save();
            pen.translate(300, 300);
            pen.rotate(num * Math.PI / 50);
            pen.beginPath();
            pen.fillStyle = color;
            pen.fillRect(x, y, a, a);
            pen.fill();
            pen.stroke();
            pen.restore();
        };
    </script>

</html>

 

 

posted @ 2016-09-27 11:15  弓长白乐  阅读(146)  评论(0)    收藏  举报