点评：这篇文章主要介绍了使用HTML5制作積み込み图的示例、需要的朋友可以参考下
<！doctype html>
<html>
<head>
<title> </title>
</head>
<body>
<canvas id = "canvas"> </canvas> </p> <p> <script>
var loading = function（canvas、options）{
this.canvas = document.getElementById（canvas）;
this.options = options;
}; </p> <p> loading.prototype = {
コンストラクター：読み込み、
show：function（）{
var canvas = 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.beginpath（）;
ctx.strokestyle = color [num -1 -i];
ctx.linewidth = linewidth;
ctx.linecap = linecap;
ctx.moveto（canvascenter.x + math.cos（const_pi * i + angle） * begin、canvascenter.y + math.sin（const_pi * i + angle） * begin）;
ctx.lineto（canvascenter.x + math.cos（const_pi * i + angle） * old、canvascenter.y + math.sin（const_pi * i + angle） * old）;
ctx.stroke（）;
ctx.closepath（）;
}
Angle += const_pi;
console.log（angle）
}、50）;
}、
非表示：function（）{
ClearInterval（window.timer）;
}
}; </p> <p>（function（）{
var options = {
num：8、
Begin：20、
古い：40、
LineWidth：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） "、" rgb（120） ""
};
var Loading = new Loading（ "Canvas"、options）;
loading.show（）;
}（））;
</script>
</body>
</html>
效果图：