： ： 这篇文章主要介绍了使用 html5 制作 التحميل 图的示例 ، 需要的朋友可以参考下
<! 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 = الخيارات ؛
} ؛ </p> <p> loading.prototype = {
مُنشئ: التحميل ،
عرض: وظيفة () {
var canvas = this.canvas ،
تبدأ = this.options.begin ،
قديم = this.options.old ،
linewidth = this.options.linewidth ،
canvascenter = {x: canvas.width / 2 ، y: canvas.height / 2} ،
ctx = canvas.getContext ("2d") ،
اللون = this.options.color ،
num = this.options.num ،
زاوية = 0 ،
linecap = this.options.linecap ،
const_pi = math.pi * (360 / num) / 180 ؛
window.timer = setInterval (function () {
ctx.clearrect (0 ، 0 ، canvas.width ، canvas.height) ؛
لـ (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) * start ، 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 (زاوية)
} ، 50) ؛
} ،
إخفاء: وظيفة () {
ClearInterval (window.timer) ؛
}
} ؛ </p> <p> (function () {
خيارات var = {
رقم: 8 ،
ابدأ: 20 ،
قديم: 40 ،
عرض الخط: 10 ،
linecap: "جولة" ،
اللون: ["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)
} ؛
var loading = تحميل جديد ("قماش" ، خيارات) ؛
loading.show () ؛
} ()) ؛
</script>
</body>
</html>
： ：