点评: 这篇文章主要介绍了使用 Html5 制作 Chargement 图的示例, 需要的朋友可以参考下
<! Doctype html>
<html>
<adal>
<Title> </Title>
</ head>
<body>
<canvas id = "canvas"> </ canvas> </p> <p> <cript>
Var chargement = fonction (Canvas, Options) {
this.canvas = document.getElementById (canvas);
this.options = options;
}; </p> <p> chargement.prototype = {
Constructeur: chargement,
show: function () {
var toivas = 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,
angle = 0,
lineCap = this.options.linecap,
Const_pi = math.pi * (360 / num) / 180;
window.timer = setInterval (function () {
ctx.ClearRect (0, 0, canvas.width, canvas.height);
pour (var i = 0; i <num; i + = 1) {
ctx.beginPath ();
ctx.strokestyle = couleur [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);
},
masquer: function () {
ClearInterval (Window.Timer);
}
}; </p> <p> (function () {
Var Options = {
Num: 8,
Commencer: 20,
vieux: 40,
Linewidth: 10,
linecap: "rond",
Couleur: ["RGB (0, 0, 0)", "RGB (20, 20, 20)", "RGB (40, 40, 40)", "RGB (60, 60, 60)", "RGB (80, 80, 80)"
};
var chargement = nouveau chargement ("canvas", options);
chargement.show ();
} ());
</cript>
</docy>
</html>
：