点评 ： 这篇文章主要介绍了使用 HTML5 制作 Carga 图的示例, 需要的朋友可以参考下
<! Doctype html>
<html>
<Evista>
<title> </title>
</ablo>
<Body>
<Canvas id = "Canvas"> </ Canvas> </p> <p> <script>
var carga = function (Canvas, opciones) {
this.canvas = document.getElementById (Canvas);
this.options = options;
}; </p> <p> loading.prototype = {
Constructor: Carga,
show: function () {
var lienvas = this.canvas,
begin = this.options.begin,
antiguo = 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);
para (var i = 0; i <num; i += 1) {
ctx.beginpath ();
ctx.Strokestyle = color [num - 1 - i];
ctx.linewidth = lineWidth;
ctx.lineCap = linecap;
ctx.moveto (CanvCenter.x + Math.cos (const_pi * i + ángulo) * Begin, CanvCenter.y + Math.sin (const_pi * i + ángulo) * begin);
ctx.lineto (canvcenter.x + math.cos (const_pi * i + ángulo) * antiguo, canvascenter.y + math.sin (const_pi * i + ángulo) * antiguo);
ctx.stroke ();
ctx.ClosePath ();
}
ángulo += const_pi;
console.log (ángulo)
}, 50);
},
ocultar: function () {
ClearInterval (Window.Timer);
}
}; </p> <p> (function () {
opciones var = {
NUM: 8,
Comienzo: 20,
Viejo: 40,
linewidth: 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 carga = nueva carga ("lienzo", opciones);
loading.show ();
} ());
</script>
</body>
</html>
效果图 ：