loading页面(2017.12.13)
来源:互联网 发布:天使投资 知乎 编辑:程序博客网 时间:2024/06/05 02:36
利用canvas 画布API写的一个简单的loading界面,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>loading</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
canvas{
display:block;
background:#000000;
}
</style>
<body>
<canvas id="loading"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("loading");
canvas.width = innerWidth;
canvas.height = innerHeight;
var ctx = canvas.getContext("2d");
var width = innerWidth;
var height = innerHeight;
var timer = null;
var speed = 5;
var loading = 0.5*width-150;
var count = 0;
var deg = new Array(0,300,265,180,165,105);
var rad = new Array(0.1*height,0.08*height,0.06*height);
onload = function(){ timer = setInterval("draw()",100); };
window.onresize = function(){
clearInterval(timer);
canvas.width = innerWidth;
canvas.height = innerHeight;
width = innerWidth;
height = innerHeight;
count = 0;
rad[0] = 0.1*height;
rad[1] = 0.08*height;
rad[2] = 0.06*height;
loading = 0.5*width-150;
timer = setInterval("draw()",100);
}
function draw(){
ctx.strokeStyle="#00ffff"; //画笔颜色必须每次都规定,否则默认为黑色
/*中心圆圈*/
ctx.clearRect(0,0,width,0.64*height);
for(var j=0,k=0;j<3;j++)
{
ctx.beginPath();
ctx.arc(0.5*width,0.5*height,rad[j],dToR(deg[k]),dToR(deg[k+1]),false);
ctx.stroke();
k += 2;
}
for(var i=0;i<7;i++){ deg[i] += speed; }
/*loading字体和进度*/
var percent = (count++)+"%";
ctx.clearRect(0,0.66*height,width,height);
ctx.fillStyle = "#00ffff";
ctx.font = "italic 1.2em serif";
ctx.fillText("Loading...",0.5*width-40.5,0.5*height+7.5);
ctx.fillText(percent,0.5*width-10,0.68*height);
/*进度条*/
ctx.beginPath();
ctx.arc(0.5*width-150,0.65*height,0.01*height,dToR(90),dToR(270),false);
ctx.arc(0.5*width+150,0.65*height,0.01*height,dToR(270),dToR(90),false);
ctx.moveTo(0.5*width-150,0.66*height);
ctx.lineTo(0.5*width+150,0.66*height);
ctx.stroke();
ctx.beginPath();
ctx.arc(loading,0.65*height,0.01*height,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
loading += 3;
if(loading == 0.5*width+153) /*153是为了把最后的一点画上*/
{
clearInterval(timer);
alert("page is completely loaded");
}
}
function dToR(degree){
if(degree>360)
return ((degree-360)*Math.PI)/180;
else
return (degree*Math.PI)/180;
}
</script>
</html>
大致效果如下:
阅读全文
0 0
- loading页面(2017.12.13)
- 页面loading
- Loading页面
- Loading page,loading是遮罩页面
- 页面loading(二)
- 等待页面loading
- 真正的loading页面
- LOADING页面小技巧
- LOADING页面小技巧
- 修改页面loading。。。样式
- 页面加载loading....(2)
- 页面载入动画(loading)
- 页面加载Loading
- IOS loading 页面
- loading页面加载用
- 页面Loading js插件
- ol.loading 页面loading层。使用简单
- 输出页面前显示Loading......
- 专业程序员的标准,你达到了吗?
- 当程序员追求佛系,会发生什么……
- Python 笔试集(2):你不知道的 Python 整数
- linux安装maven
- gcc相关
- loading页面(2017.12.13)
- ajax与后台的交互demo
- distinct 排序多字段问题
- Integer比较时用==还是equals
- Dubbo线程模型
- RFID界面设计详解
- [leetcode] 121. Best Time to Buy and Sell Stock
- 程序员过了35岁,感觉自己活成...
- Maven教程完整版免费下载