点评 ： 这篇文章主要介绍了使用 Html5 制作 Carregando 图的示例, 需要的朋友可以参考下
<! Doctype html>
<html>
<head>
<Title> </title>
</head>
<Body>
<Canvas id = "Canvas"> </lvas> </p> <p> <cript>
var loading = function (tela, opções) {
this.Canvas = document.getElementById (Canvas);
this.options = opções;
}; </p> <p> carregamento.prototype = {
Construtor: Carregando,
SHOW: function () {
var tela = this.Canvas,
begin = this.options.begin,
antigo = 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,
ângulo = 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 = cor [num - 1 - i];
ctx.linewidth = linewidth;
ctx.linecap = linecap;
ctx.moveto (canvascenter.x + math.cos (const_pi * i + ângulo) * BEGIN, canvascenter.y + math.sin (const_pi * i + ângulo) * BEGIN);
ctx.lineto (Canvascenter.x + math.cos (const_pi * i + ângulo) * antigo, canvascenter.y + math.sin (const_pi * i + ângulo) * antigo);
ctx.stroke ();
ctx.closePath ();
}
ângulo += const_pi;
console.log (ângulo)
}, 50);
},
ocultar: function () {
ClearInterval (Window.timer);
}
}; </p> <p> (function () {
var options = {
NUM: 8,
Comece: 20,
velho: 40,
Linha de linha: 10,
LineCap: "Round",
color: ["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)"]
};
var carregamento = novo carregamento ("tela", opções);
carregamento.show ();
} ());
</script>
</body>
</html>
效果图