html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

使用html5制作loading图的示例

发布时间：2022-04-13 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用html5制作loading图的示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。


复制代码
代码如下:

<!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 = {
constructor: Loading,
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,
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 + 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);
},
hide: function () {
clearInterval(window.timer);
}
};</p> <p> (function () {
var options = {
num : 8,
begin: 20,
old: 40,
lineWidth: 10,
lineCap: "round",
color: ["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图的示例全部内容，希望文章能够帮你解决使用html5制作loading图的示例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：html5html5
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程