点评:这篇文章主要介绍了使用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 = options;
}; </p> <p> loading.prototype = {
コンストラクター:読み込み、
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、
角度= 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);
}、
非表示:function(){
ClearInterval(window.timer);
}
}; </p> <p>(function(){
var options = {
num:8、
Begin: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) ""
};
var Loading = new Loading( "Canvas"、options);
loading.show();
}());
</script>
</body>
</html>
效果图: