小编给大家分享一下如何使用html5制作loading图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
代码如下:
<!DOCTYPE html>
<html>
<head>
<title> </ title>
</ head>
<body>
<canvas id =“ canvas”> </ canvas> </ p> <p> <script>
var Loading =功能(画布,选项){
this.canvas = document.getElementById(canvas);
this.options =选项;
}; </ p> <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 <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 + angle)* old);
ctx.stroke();
ctx.closePath();
}
angle + = CONST_PI;
console.log(angle)
},50);
},
hide:function(){
clearInterval(window.timer);
}
}; </ p> <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>
以上是“如何使用html5制作loading图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!