具有动画SVG模式的画布

Question

我正在尝试创建一个具有对称排列点的画布，这些点可以淡化/淡出个体（如脉冲效果）。

到目前为止我得到了什么：

var ctx = $('#canvas')[0].getContext("2d");

ctx.fillStyle = "#fff";
var total_circles = 50,
    posTop = 10,
    posLeft = 10;

for(i = 0; i < total_circles; i++){
    posTop = posTop + 10,
    posLeft = posLeft + 10;
    ctx.beginPath();
    ctx.arc(posLeft, posTop, 3, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
}

http://jsfiddle.net/0tLxanws/

我甚至没有安排积分（第一步，然后是动画）。

我创建了一个小图片，这样你就可以看到我的意思了：

也是一个小巧的影片，但没有画布： http://jsfiddle.net/dx3jgy8h/