html新建通用loading,使用html5制作loading图的示例

这篇文章主要介绍了使用html5制作loading图的示例，需要的朋友可以参考下

复制代码

代码如下：

title>

head>

canvas> p>

var Loading =功能(画布，选项){

this.canvas = document.getElementById(canvas);

this.options =选项;

}; p>

Loading.prototype = {

构造函数：正在加载，

显示：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

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 + angle)* old);

ctx.stroke();

ctx.closePath();

}

angle + = CONST_PI;

console.log(angle)

}，50);

}，

hide：function(){

clearInterval(window.timer);

}

}; p>

(函数(){

var options = {

num：8，

begin：20，

old：40，

lineWidth：10，

lineCap：“ round”，

颜色：[“ 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>