点评：这篇文章主要介绍了使用html5制作加载图的示例，需要的朋友可以参考下
<！doctype html>
<html>
<头>
<title> </title>
</head>
<身体>
<canvas id =“ canvas”> </canvas> </p> <p> <p> <p> <script>
var loading =函数（canvas，options）{
this.canvas = document.getElementById（canvas）;
this.options =选项;
}; </p> <p> loading.prototype = {
构造函数：加载，
显示：function（）{
var帆布= this.canvas，
begin = this.options.begin，
old = this.options.old，
lineWidth = this.options.lineWidth，
canvascenter = {x：canvas.width / 2，y：canvas.height / 2}，
ctx = canvas.getContext（“ 2d”），
color = this.options.Color，
num = this.options.num，
角= 0，
linecap = this.options.linecap，
const_pi = Math.pi *（360 / num） / 180;
window.timer = setInterval（function（）{
ctx.ClearRect（0，0，canvas.width，canvas.height）;
for（var i = 0; i <num; i += 1）{
ctx.beginath（）;
ctx.strokestyle =颜色[num -1- i];
ctx.lineWidth =线宽;
ctx.linecap = linecap;
ctx.moveto（canvascenter.x + Math.cos（const_pi * i + Angle） *开始，canvascenter.y + Math.sin（const_pi * i + Angle） * begin）;
ctx.lineto（canvascenter.x + math.cos（const_pi * i + angle） *旧，canvascenter.y + math.sin（const_pi * i + Angle） * old）;
ctx.stroke（）;
ctx.closepath（）;
}
角 += const_pi;
console.log（角度）
}，50）;
}，，
hide：function（）{
clear Interval（window.timer）;
}
}; </p> <p>（function（）{
var选项= {
数字：8，
开始：20，
旧：40，
线宽：10，
linecap：“圆”，
颜色：[“ RGB（0，0，0）”，“ RGB（20，20，20）”，“ RGB（40，40，40）”，“ RGB（60，60，60）”，“ RGB（80，80，80），“ RGB（100，100，100，100）
};
var Loading =新加载（“ canvas”，options）;
loading.show（）;
}（））;
</script>
</body>
</html>
效果图：