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

 

总结

以上是如意编程网为你收集整理的html5 css3 loading 效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。