<script type="text/javascript">
    (function () {
        //获取画板
        var canvas = document.querySelector('#wrap');
        if (!canvas.getContext) {
            return;
        }
        //获取绘制对象
        var ctx = canvas.getContext('2d');
        //定义一个数组
        var circleArr = [];
        setInterval(function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            for (var i = 0; i < circleArr.length; i++) {
                var circle = circleArr[i];
                //设置圆点的x
                circle.x = circle.x + Math.sin(circle.y / 180 * Math.PI) * circle.scale;
                //设置圆点的y
                circle.y -= circle.deg;
 
                if (circle.y < 0) {
                    circleArr.splice(i, 1)
                }
                circle.deg++;
            }
 
 
            for (var i = 0; i < circleArr.length; i++) {
                var circle = circleArr[i];
                ctx.beginPath();
                ctx.fillStyle = 'rgba(' + circle.red + ',' + circle.green + ',' + circle.blue + ',' + circle.opacity + ')';
                ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
                ctx.fill();
            }
 
        }, 100)
 
        //生成
        setInterval(function () {
            //定义一个对象存放circle对象
            var circle = {};
            //坐标
            circle.x = Math.random() * canvas.width;
            circle.y = canvas.height;
            circle.r = Math.random() * 8 + 2;
            circle.red = Math.random() * 255;
            circle.green = Math.random() * 255;
            circle.blue = Math.random() * 255;
            circle.opacity = 10;
            circle.scale = Math.random() * 5 + 5;
            circle.deg = 1; //每次变化
            circleArr.push(circle);
        }, 50)
 
 
    })();
</script>