小编给大家分享一下如何使用HTML5制作loading图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 代码如下： <
小编给大家分享一下如何使用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图”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！
--结束END--
本文标题: 如何使用html5制作loading图
本文链接: https://lsjlt.com/news/89495.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0