使用html5制作loading图的示例


Posted in HTML / CSS onApril 14, 2014

复制代码
代码如下:

<!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图的示例

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 #HTML / CSS
html5图片上传预览示例分享
Apr 14 #HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 #HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 #HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 #HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 #HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 #HTML / CSS
You might like
PHP的历史和优缺点
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现简单过滤文本段的方法
2017/05/24 Python
Python常见异常分类与处理方法
2017/06/04 Python
深入浅析Python传值与传址
2018/07/10 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python 魔法函数实例及解析
2019/09/25 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
婚前协议书范本
2014/04/15 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技