function canvasBg(id) {
    var canvas = document.getElementById(id);
    var ctx = canvas.getContext("2d");
    var c = $("#c");
    var w, h;
    var pi = Math.PI;
    var all_attribute = {
        num: 100, // 个数
        start_probability: 0.1, // 如果数量小于num，有这些几率添加一个新的
        radius_min: 1, // 初始半径最小值
        radius_max: 2, // 初始半径最大值
        radius_add_min: .3, // 半径增加最小值
        radius_add_max: .5, // 半径增加最大值
        opacity_min: 0.3, // 初始透明度最小值
        opacity_max: 0.5, // 初始透明度最大值
        opacity_prev_min: .003, // 透明度递减值最小值
        opacity_prev_max: .005, // 透明度递减值最大值
        light_min: 40, // 颜色亮度最小值
        light_max: 70, // 颜色亮度最大值
    };
    var style_color = find_random(0, 360);
    var all_element = [];
    window_resize();

    function start() {
        window.requestAnimationFrame(start);
        style_color += .1;
        ctx.fillStyle = 'hsl(' + style_color + ',100%,97%)';
        ctx.fillRect(0, 0, w, h);
        if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability) {
            all_element.push(new ready_run);
        }
        all_element.map(function(line) {
            line.to_step();
        })
    }

    function ready_run() {
        this.to_reset();
    }
    ready_run.prototype = {
        to_reset: function() {
            var t = this;
            t.x = find_random(0, w);
            t.y = find_random(0, h);
            t.radius = find_random(all_attribute.radius_min, all_attribute.radius_max);
            t.radius_change = find_random(all_attribute.radius_add_min, all_attribute.radius_add_max);
            t.opacity = find_random(all_attribute.opacity_min, all_attribute.opacity_max);
            t.opacity_change = find_random(all_attribute.opacity_prev_min, all_attribute.opacity_prev_max);
            t.light = find_random(all_attribute.light_min, all_attribute.light_max);
            t.color = 'hsl(' + style_color + ',100%,' + t.light + '%)';
        },
        to_step: function() {
            var t = this;
            t.opacity -= t.opacity_change;
            t.radius += t.radius_change;
            if (t.opacity <= 0) {
                t.to_reset();
                return false;
            }
            ctx.fillStyle = t.color;
            ctx.globalAlpha = t.opacity;
            ctx.beginPath();
            ctx.arc(t.x, t.y, t.radius, 0, 2 * pi, true);
            ctx.closePath();
            ctx.fill();
            ctx.globalAlpha = 1;
        }
    }

    function window_resize() {
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }
    $(window).resize(function() {
        window_resize();
    });

    function find_random(num_one, num_two) {
        return Math.random() * (num_two - num_one) + num_one;
    }
    (function() {
        var lastTime = 0;
        var vendors = ['webkit', 'moz'];
        for (var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
            window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
                window[vendors[xx] + 'CancelRequestAnimationFrame'];
        }

        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
                var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                }, timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
        }
        if (!window.cancelAnimationFrame) {
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
        }
    }());
    start();
}