html5 css3 loading 效果

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時會接着此次的位置旋轉，而不是初始位置
                }

　　

demon https://github.com/breakfriday/loadingDemo