用Canvas制作loading动画

2023-02-12 15:09:41

　　上一篇讲到用SVG制作loading动画，其中提到了线性渐变在扇形区域中的问题，并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容，所以现在用Canvas重新实现了一遍。　　

　　这里与SVG不同的是Canvas的动画只能以脚本的方式进行，大家在用的时候稍微考虑一下性能问题，不过此版本基本如果浏览器版本不是太低的话应该都是兼容的，IE需要IE9以上的版本。

　　这里的渐变不如SVG那么好原因就是上一讲所提，不过还可以接受，也没什么大的问题。

　　上代码：

　　图片资源：

　　　　

　　样式代码：

　　　　.loadingcanvas-out
      　　{width:70px;height:70px;margin:0 auto;position:absolute;left:50%;margin-left:-35px;top:55%;}
      　　#loading-canvas
      　　{border:0;position:relative;}

　　HTML：

　　　　<div class="loadingcanvas-out">
           　　<canvas id="loading-canvas"></canvas>
           　　<img src="../images/gototop1.png" alt="加载中" style='position:absolute;top:0px;left:0px;z-index:99;width:70px;height:70px;' />
       　 </div>

　　脚本：

　　　　var canvas = document.getElementById("loading-canvas"), index = 0;
      　　var canvas = document.getElementById("loading-canvas"), index = 0;
            function DrawSector(canvas_tag, start_angle, angle, radius, anticlockwise) {
                var centerPoint = { x: 35, y: 35 };
                start_angle = start_angle || 0;
                if (canvas_tag.getContext) {
                    ctx = canvas_tag.getContext("2d");
                    ctx.translate(35, 35);
                    setInterval(
                        function() {
                            ctx.fillStyle = "White";
                            ctx.fill();
                            var g1 = ctx.createLinearGradient(0, 70, 60, 10);
                            g1.addColorStop(0, 'rgba(17,143,44,1)');
                            g1.addColorStop(0.5, 'rgba(137,215,1,0.4)');
                            g1.addColorStop(1, 'rgba(255,255,255,0.3)');
                            ctx.fillStyle = g1;
                            if (index >= 360) {
                                index = 0;
                            }
                            ctx.beginPath();
                            ctx.arc(0, 0, 33.9, 0, Math.PI / 180 * 150, false);
                            //画出结束半径
                            ctx.lineTo(0, 0);
                            ctx.closePath();
                            ctx.fill();
                            ctx.rotate(5 * Math.PI / 180);
                            index++;
                        }, 10);

                } else {
                    alert('You need Safari or Firefox 1.5+ to see this demo.');
                }
            }
            //画一个起始角度为0度，结束角度为150度，绘图方向顺时针的填充扇形
            DrawSector(canvas, 0, Math.PI / 180 * 150, 35, false);

　　最终效果：

　　　　

用Canvas制作loading动画

　　

　　