上一篇讲到用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);
最终效果：
