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
);
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();
}