点评： html5 制作โหลด图的示例, 需要的朋友可以参考下
<! doctype html>
<html>
<head>
<title> </title>
</head>
<body>
<canvas id = "canvas"> </anvas> </p> <p> <prict>
var loading = function (canvas, ตัวเลือก) {
this.canvas = document.getElementById (Canvas);
this.options = ตัวเลือก;
}; </p> <p> loading.prototype = {
ตัวสร้าง: กำลังโหลด
แสดง: function () {
var canvas = this.canvas
เริ่มต้น = 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
มุม = 0,
linecap = this.options.linecap,
const_pi = math.pi * (360 / num) / 180;
window.timer = setInterval (ฟังก์ชัน () {
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 + มุม) * เริ่มต้น, canvascenter.y + math.sin (const_pi * i + มุม) * เริ่มต้น);
ctx.lineto (canvascenter.x + math.cos (const_pi * i + angle) * เก่า, canvascenter.y + math.sin (const_pi * i + มุม) * เก่า);
ctx.stroke ();
ctx.closepath ();
-
มุม += const_pi;
console.log (มุม)
}, 50);
-
ซ่อน: ฟังก์ชั่น () {
ClearInterval (window.timer);
-
}; </p> <p> (ฟังก์ชัน () {
ตัวเลือก var = {
NUM: 8,
เริ่มต้น: 20,
เก่า: 40,
linewidth: 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)"
-
การโหลด var = การโหลดใหม่ ("ผืนผ้าใบ", ตัวเลือก);
โหลด. show ();
-
</script>
</body>
</html>
效果图：