canvas html5load1
主要思路update 实现12个点的绘制和旋转效果
var update = function() {
ctx.save();// 把当前绘图状态保存起来
ctx.clearRect(0, 0, 128, 128);// 擦除画布
ctx.translate(64, 64);// 把坐标原点移到画布*
base = (++base === 13) ? (base - 12) : base;// 使用base来指示最大的圆点所在的位置，对应起点的12个位置，实现旋转动画的效果
var angle = Math.PI / 6;// 画12个点，所以每个点之间的角度是1/6 PI
var beginAngle = angle * base;
for ( var i = 1; i <= 12; i++) {
ctx.beginPath();// 开始一个路径
if (i === 1) {
ctx.rotate(beginAngle);
} else {
ctx.rotate(angle);// 每次调用rotate之后，其旋转角度并不会还原，而是接着上一次的
}
ctx.arc(0, -48, i * 0.8 + 1, 0, 2 * Math.PI, true);// 绘制一个圆点
ctx.closePath();// 闭合路径
ctx.fill();
}
ctx.restore();// 还原绘图状态，如果不还原，则下一次调用roatate时会接着这次的位置旋转，而不是初始位置
}