HTML5实现的Loading缓冲效果(2)_H5之家 - 中国HTML5教程资源分享第一站

<!doctype html>

<html>

<head>

<title>loading</title>

html5 loading 控件

作者：玉开博客：

发布或使用此控件，请保留作者声明

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>您的浏览器不支持html5哟</canvas>

<p>

</p>

var loadingObj = new loading(document.getElementById('canvas'),{radius:8,circleLineWidth:3});

loadingObj.show();

</script>

</body>

</html>

复制代码

演示地址：

目前从移动设备对HTML5的支持来看，HTML5将来必定大有可为。
天下大势，合久必分，分久必和。PC开发时Web应用在很大程度上统一了客户端程序；而现在移动开发使用不同的系统不同的语言，将来大多数应用必然会统一到一种语言，这种语言必然是html5加Javascript。