點評：這篇文章主要介紹了使用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>
效果圖：