canvas绘制的小效果

闲来无事，随便写的一个canvas绘图的小效果，主要是好玩，话不多说，直接上代码：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');  
var arr = [];
var brr = ['red', 'blue', 'yellow', 'white', '#EEEEFF', 'gold', 'pink'];
var crr = [];
var t = null;
cavnas.addEventListener('click',draw,false);
    function draw(e) {
        if (t) { clearTimeout(t) };
        arr.push({ x: e.clientX, y: e.clientY, ind: 0, d: false });
            var n = Math.ceil(Math.random() * 8) - 1;
            crr.push(brr[n]);
            function set() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                t = setTimeout(set, 20);
            for (var i = 0; i < arr.length; i++) {
                (function (j) {
                    if (arr[i].d == false) { arr[i].ind += 1; };
                    if (arr[i].d == true) { arr[i].ind -= 1; };
                    if (arr[i].ind >= 80) { arr[i].d = true; };
                    if (arr[i].ind <= 0) { arr[i].d = false; };
                    context.beginPath();
                    context.fillStyle = crr[i];
                    context.arc(arr[i].x, arr[i].y, arr[i].ind, 0, Math.PI * 2, true);
                    context.fill();
                    context.closePath();
                })(i);
            }
        }
        set();
    }