点评 ： 这篇文章主要介绍了使用 HTML5 制作 Загрузка 图的示例, 需要的朋友可以参考下
<! Doctype html>
<html>
<голова>
<title> </title>
</head>
<тело>
<canvas id = "canvas"> </canvas> </p> <p> <cript>
var загрузка = function (canvas, options) {
this.canvas = document.getElementById (Canvas);
this.options = options;
}; </p> <p> загрузка.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 + angel) * begin, canvascenter.y + math.sin (const_pi * i + angel) * begin);
ctx.lineto (canvascenter.x + math.cos (const_pi * i + angel) * old, canvascenter.y + math.sin (const_pi * i + angel) * old);
ctx.stroke ();
ctx.closepath ();
}
угол += const_pi;
Консоль.log (угол)
}, 50);
},
скрыть: function () {
clearInterval (window.timer);
}
}; </p> <p> (function () {
var options = {
num: 8,
Начало: 20,
Старый: 40,
ширина линии: 10,
LineCap: "Round",
Цвет: ["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, 120, 120) ", RGB (140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140," 140, ", 140, 140,", 140, 140, 140, ", 140, 140, 140,", 140, 140, ", 140, 140,", 140, 140, ", 140, 140, 140,".
};
var загрузка = новая загрузка ("Canvas", Options);
загрузка.show ();
} ());
</script>
</body>
</html>
效果图 ：