等待页面动态效果图2(仿支付宝笑脸)(canvas)
先上最终效果图: 
本效果使用了HTML5的新增功能:canvas
IE8及以下不支持此功能,如果需要使用该功能,可以在表头导入excanvas.js文件
以下是实现代码,其基本实现过程是从底部开始,不断画小圆圈,使其绕圈形成一个大圆圈,之后用白色圆圈再执行一遍,覆盖掉原先操作
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<!--下面excanvas.js需下载才能在IE下支持canvas-->
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
//定义了全局变量,画布元素,画布控件,绕圈圆的半径,转化度数为弧度的倍数
window.canve; window.ctx; window.radio,window.RADI,window.times;
//画布轨迹保留
function drowCir(retenger,color){
var x = 50+radio*Math.cos(retenger*RADI);//x坐标
var y = 50+radio*Math.sin(retenger*RADI);//y坐标
ctx.beginPath(); //开始路径
if(color=="white"){//试了下,如果用于遮盖的白颜色画布大小一样的话,遮盖效果不明显
ctx.arc(x,y,4,0,Math.PI*2,false);
}else{
ctx.arc(x,y,3,0,Math.PI*2,false);
}
ctx.fillStyle=color; //颜色填充
ctx.closePath(); //结束路径
ctx.fill();
}
//用于第一圈有清除画布的操作
function drowCirClear(retenger,color){
var x = 50+radio*Math.cos(retenger*RADI);//x坐标
var y = 50+radio*Math.sin(retenger*RADI);//y坐标
ctx.clearRect(0,0,100,100);
//画笑脸
if(retenger>230 ){//左边眼睛
drowCir(230,color);
}
if(retenger>310 ){//右边眼睛
drowCir(310,color);
}
if(retenger>410){//下面嘴巴
for(var i=410;i<=retenger;i=i+5){
drowCir(i,color);
}
}
ctx.beginPath(); //开始路径
ctx.arc(x,y,3,0,Math.PI*2,false);
ctx.fillStyle=color; //颜色填充
ctx.closePath(); //结束路径
ctx.fill();
}
//该函数可以返回随机颜色
function randColor(){
var color = "";
for(var j=0; j<3; j++){
color = color + clr[Math.floor(Math.random()*7)];
}
return "#"+color;
}
window.onload = function(){
canve = document.getElementById("pic");
ctx = canve.getContext('2d'); //畫布
radio = 25;//整個圆的半徑
RADI = 2*Math.PI/360;
clr=new Array('00','20','40','60','80','a0','c0','ff');//顏色隨機取值
var t=0;
var temp = 5;//每隔多少度畫圈
for(var q=0 ;q<10 ;q++){
var color = randColor();
for(var i=90;i<=450;i=i+temp){//第一圈,一个圆圈转图
t=t+20;
setTimeout("drowCirClear("+i+",'"+color+"');",t);
}
for(var i=90;i<450;i=i+temp){//第二圈,画圆
t=t+20;
setTimeout("drowCir("+i+",'"+color+"');",t);
}
t= t-20*135/temp;//在第二圈画到还剩135°的时候开始清除
for(var i=40+temp;i<=450;i=i+temp){//第三圈,清除轨迹
t=t+10;//清除时间快于画圆时间
setTimeout("drowCir("+i+",'white');",t);
}
}
}
</script>
<style type="text/css">
body{
width:95%;
}
#canvasCon{
margin:0 auto;
width:100px;
height:100px;
}
#scene{
border:1px solid black;
}
div{
background-color:write;
height:200px;
}
</style>
</head>
<body>
<div></div>
<div id="canvasCon">
<canvas id="pic" width="100px" height="100px" style="border:0px solid; "></canvas>
</div>
</body>
</html>有兴趣的话,也可以自己尝试做做下面的特效 
