使用html5制作loading图的示例
程序员文章站
2023-11-13 08:37:16
这篇文章主要介绍了使用html5制作loading图的示例,需要的朋友可以参考下... 14-04-14...
复制代码
代码如下:<!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>
效果图：