点评 ： 这篇文章主要介绍了使用 html5 制作 하중 图的示例, 需要的朋友可以参考下
<! doctype html>
<html>
<헤드>
<제목> </title>
</head>
<body>
<canvas id = "canvas"> </canvas> </p> <p> <cript>
var loading = function (캔버스, 옵션) {
this.canvas = document.getElementById (canvas);
this.options = 옵션;
}; </p> <p> 로딩 .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 (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) * 시작, canvascenter.y + math.sin (const_pi * i + angle) * 시작);
ctx.lineto (canvascenter.x + math.cos (const_pi * i + angle) * old, canvascenter.y + math.sin (const_pi * i + angle) * old);
ctx.stroke ();
ctx.closepath ();
}
각도 += const_pi;
Console.log (각도)
}, 50);
},
숨기기 : function () {
ClearInterval (Window.Timer);
}
}; </p> <p> (function () {
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) ","RGB (120, 120, 120) ","RGB (140, 140) "
};
var loading = 새 로딩 ( "캔버스", 옵션);
로드 .Show ();
} ());
</스크립트>
</body>
</html>
效果图 ：