才能是来自独创性。独创性是思维、观察、理解和判断的一种独特的方式。
DBMNG数据库管理与应用
当前位置:首页 > 经验分享 > HTML5
【DBMNG.COM原创】html5+canvas+图片实现波纹效果等待进度界面

效果截图如下:
360截图.jpg
部分js实现代码(完整代码请参考下载链接中的压缩包文件):

function drawCircular(ctx,width, height, x, y, img,sx,sy) {
  var avatarurl_width = width;
  var avatarurl_heigth = height;
  var avatarurl_x = x;
  var avatarurl_y = y;
  ctx.save();
  ctx.beginPath();
  ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

  ctx.fillStyle = "#fff";
  ctx.fill();

  ctx.strokeStyle="#33ccff";
  ctx.stroke();
  ctx.closePath();

  ctx.clip();
  ctx.drawImage(img, sx,sy,240,240,avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
  // ctx.drawImage(img,0,0,320,240,0,0,120,120 );
  ctx.textAlign="center";
  ctx.textBaseline="top";
  ctx.font = '20px 微软雅黑';//  绘制字体的大小和系列
  ctx.fillStyle = "#000";//文字的颜色
  ctx.fillText(processInt+"%",60,60); 
  ctx.restore();
}

  var imgSrc=document.getElementById('imgSrc');
  var imgSrc=new Image();
  imgSrc.src="loading_wave.png"; 
  var myCanvas = document.getElementById('myCanvas');
  var ctx = myCanvas.getContext("2d");
  var sx=0,sy=-230,processText="0",processInt=0;
  var id1=setInterval(function(){
    if(sx>=340)sx=0;
    sx=sx+10;  
    drawCircular(ctx,120,120,0,0,imgSrc,sx,sy);
  },100);
  
  var id2=setInterval(function(){
  if(processInt<100){
  processInt++;
  }
  else{
  	//processInt=100;
  	//clearInterval(id1); 
  	clearInterval(id2);
  }
  if(sy>=1){
  	//sy=-230;   
  	//clearInterval(id1); 
    //clearInterval(id2);
    }else{    	
    	sy=sy+3;
    }
  },150);

本网代码下载地址:

wait_loading_wave.zip



本站文章内容,部分来自于互联网,若侵犯了您的权益,请致邮件chuanghui423#sohu.com(请将#换为@)联系,我们会尽快核实后删除。
关于我们 - 版权声明 - 服务条款 - RSS订阅 - 工作机会 - 友情链接 - 联系我们 - 在线留言
Copyright © 2006-2020 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH   豫ICP备11002312号-2

豫公网安备 41010502002439号