代码如下:
<!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 = {
constructor: loading,
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,
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);
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);
},
hide: function () {
clearinterval(window.timer);
}
};</p> <p> (function () {
var options = {
num : 8,
begin: 20,
old: 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 loading = new loading(canvas, options);
loading.show();
}());
</script>
</body>
</html>