精品国产鲁一鲁一区二区张丽,中文字幕在线第一页,欧美一级日韩一级

HTML5在移動(dòng)設(shè)備上表現(xiàn)，相信已經(jīng)不用我多說(shuō)了，干掉了Flash之后，它已經(jīng)坐上了移動(dòng)應(yīng)用程序的第一把交椅。幾乎所有稍微高端一點(diǎn)的設(shè)備（喬幫主的iPad，iPhone和Andriod的平板手機(jī)等）的瀏覽器都支持HTML5，而且據(jù)權(quán)威人士測(cè)試，這些支持HTML5的設(shè)備對(duì)Canvas標(biāo)簽的支持也是相當(dāng)?shù)暮谩?br>
  大家都知道Web2.0以來(lái)，應(yīng)用程序的實(shí)現(xiàn)使用了大量Ajax，而Loading的小圖標(biāo)也有很多，甚至還有專門提供Loading圖片的網(wǎng)站，所以我就想能不能讓HTML5一并解決這個(gè)以前用gif文件才能解決的問(wèn)題。出乎我意料的是，實(shí)現(xiàn)的過(guò)程非常簡(jiǎn)單，只用了不到一小時(shí)的時(shí)間我就用HTML5實(shí)驗(yàn)出了兩個(gè)Loading效果，而且這樣做出來(lái)的Loading圖標(biāo)是可定制的，既可以定制顏色，也可以定制大小等屬性。

  第一個(gè)帶著小尾巴轉(zhuǎn)動(dòng)的loading圖標(biāo)畫圖的思路是，首先畫一個(gè)圓，然后在圓的邊上按順序畫大小逐漸減小的小圓點(diǎn)，在每次刷新畫布時(shí)改變這一系列的小圓點(diǎn)在大圓邊上的位置。

  這里是案例的演示代碼：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="GBK"/>
<title>loading</title>
<script type="text/javascript">
function loading(canvas,options){
this.canvas = canvas;
if(options){
this.radius = options.radius||12;
this.circleLineWidth = options.circleLineWidth||4;
this.circleColor = options.circleColor||'lightgray';
this.dotColor = options.dotColor||'gray';
}else{
this.radius = 12;
this.circelLineWidth = 4;
this.circleColor = 'lightgray';
this.dotColor = 'gray';
}
}
loading.prototype = {
show:function (){
var canvas = this.canvas;
if(!canvas.getContext)return;
if(canvas.__loading)return;
canvas.__loading = this;
var ctx = canvas.getContext('2d');
var radius = this.radius;
var rotators = [{angle:0,radius:1.5},{angle:3/radius,radius:2},{angle:7/radius,radius:2.5},{angle:12/radius,radius:3}];
var me = this;
canvas.loadingInterval = setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
var lineWidth = me.circleLineWidth;
var center = {x:canvas.width/2 - radius,y:canvas.height/2-radius};
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = me.circleColor;
ctx.arc(center.x,center.y,radius,0,Math.PI*2);
ctx.closePath();
ctx.stroke();
for(var i=0;i<rotators.length;i++){
var rotatorAngle = rotators[i].currentAngle||rotators[i].angle;
//在圓圈上面畫小圓
var rotatorCenter = {x:center.x-(radius)*Math.cos(rotatorAngle) ,y:center.y-(radius)*Math.sin(rotatorAngle)};
var rotatorRadius = rotators[i].radius;
ctx.beginPath();
ctx.fillStyle = me.dotColor;
ctx.arc(rotatorCenter.x,rotatorCenter.y,rotatorRadius,0,Math.PI*2);
ctx.closePath();
ctx.fill();
rotators[i].currentAngle = rotatorAngle+4/radius;
}
},50);
},
hide:function(){
var canvas = this.canvas;
canvas.__loading = false;
if(canvas.loadingInterval){
window.clearInterval(canvas.loadingInterval);
}
var ctx = canvas.getContext('2d');
if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height);
}
};
</script>
</head>
<body>
<canvas id="canvas" width="300" height="100" style="border:1px solid #69c"></canvas>
<p>
<input type="button" onclick="loadingObj.hide()" value="HideLoading"/>
<input type="button" onclick="loadingObj.show()" value="showLoading"/>
</style>
<p>
<script>
var loadingObj = new loading(document.getElementById('canvas'),{radius:8,circleLineWidth:3});
loadingObj.show();
</script>
</body>
</html>

復(fù)制代碼

演示地址：http://f200-8.bbs.hexun.com/e/111219/loading.htm

第二個(gè)較為簡(jiǎn)單，在一個(gè)圓環(huán)上有一個(gè)相同圓心相同半徑的圓弧在不停的轉(zhuǎn)動(dòng)。畫圖的步驟是首先畫一個(gè)圓環(huán)，然后畫一個(gè)不同顏色相同圓心半徑的圓弧，在每次刷新畫布時(shí)改變圓弧的起始角度。

這里是案例的演示代碼：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<title>loading</title>
<script>
/*
html5 loading 控件
作者：玉開(kāi) 博客：http://www.cnblogs.com/yukaizhao/
發(fā)布或使用此控件，請(qǐng)保留作者聲明
*/
function loading(canvas,options){
this.canvas = canvas;
if(options){
this.radius = options.radius||12;
this.circleLineWidth = options.circleLineWidth||4;
this.circleColor = options.circleColor||'lightgray';
this.moveArcColor = options.moveArcColor||'gray';
}else{
this.radius = 12;
this.circelLineWidth = 4;
this.circleColor = 'lightgray';
this.moveArcColor = 'gray';
}
}
loading.prototype = {
show:function (){
var canvas = this.canvas;
if(!canvas.getContext)return;
if(canvas.__loading)return;
canvas.__loading = this;
var ctx = canvas.getContext('2d');
var radius = this.radius;
var me = this;
var rotatorAngle = Math.PI*1.5;
var step = Math.PI/6;
canvas.loadingInterval = setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
var lineWidth = me.circleLineWidth;
var center = {x:canvas.width/2 - radius,y:canvas.height/2-radius};
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = me.circleColor;
ctx.arc(center.x,center.y,radius,0,Math.PI*2);
ctx.closePath();
ctx.stroke();
//在圓圈上面畫小圓
ctx.beginPath();
ctx.strokeStyle = me.moveArcColor;
ctx.arc(center.x,center.y,radius,rotatorAngle,rotatorAngle+Math.PI*.45);
ctx.stroke();
rotatorAngle+=step;
},50);
},
hide:function(){
var canvas = this.canvas;
canvas.__loading = false;
if(canvas.loadingInterval){
window.clearInterval(canvas.loadingInterval);
}
var ctx = canvas.getContext('2d');
if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height);
}
};
</script>
</head>
<body>
<canvas id="canvas" width="300" height="100" style="border:1px solid #69c">您的瀏覽器不支持html5喲</canvas>
<p>
<input type="button" onclick="loadingObj.hide()" value="HideLoading"/>
<input type="button" onclick="loadingObj.show()" value="showLoading"/>
</p>
<script>
var loadingObj = new loading(document.getElementById('canvas'),{radius:8,circleLineWidth:3});
loadingObj.show();
</script>
</body>
</html>

復(fù)制代碼

演示地址：http://f200-8.bbs.hexun.com/e/111219/loading2.htm

目前從移動(dòng)設(shè)備對(duì)HTML5的支持來(lái)看，HTML5將來(lái)必定大有可為。
天下大勢(shì)，合久必分，分久必和。PC開(kāi)發(fā)時(shí)Web應(yīng)用在很大程度上統(tǒng)一了客戶端程序；而現(xiàn)在移動(dòng)開(kāi)發(fā)使用不同的系統(tǒng)不同的語(yǔ)言，將來(lái)大多數(shù)應(yīng)用必然會(huì)統(tǒng)一到一種語(yǔ)言，這種語(yǔ)言必然是html5加Javascript。

注意：由于目前支持HTML5的瀏覽器還不是很多，請(qǐng)各位在查看演示案例的時(shí)候使用Firefox10或者Oprea11等高版本瀏覽器。

本文轉(zhuǎn)自我愛(ài)貓貓技術(shù)博客

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。

pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML5實(shí)現(xiàn)的Loading緩沖效果

相關(guān)文檔推薦