canvas绘制加载特效

css样式:
body{
text-align: center;
}
canvas{
background: #ddd;
}

canvas标签:

<canvas id="canvas" width="500" height="400"></canvas>
js:
  var elem = document.getElementById("canvas");
  var canvas = elem.getContext("2d");//获取画笔
  //开始路径
  //var a = -90*Math.PI/180;
  canvas.beginPath();
  canvas.lineWidth=10;
  canvas.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);
  canvas.strokeStyle = "#aaa";
  canvas.stroke();
  var b = -90;
  var timer = setInterval(function(){
  canvas.beginPath();
  canvas.arc(250,200,100,-90*Math.PI/180,(b++)*Math.PI/180);
  canvas.strokeStyle = "green";
  canvas.stroke();
  // if(b>=270){
  // clearInterval(timer);
  // timer = null;
  // }
  },10);

时间: 2024-08-07 20:11:11

canvas绘制加载特效的相关文章

分享JQuery动画插件Velocity.js的六种列表加载特效

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc

一款由jquery实现的超炫的页面加载特效

今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1200 600"> <line id="uno" x1="600" y1="0

css3超炫8种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-Typ

纯css3实现的动画加载特效

之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="curve3"> </div> <div class="curve2"> <div class="text"> 15 </div> </di

js实现图片加载特效(从左到右,百叶窗,从中间到两边)

/* 网上百度的,感觉”从中间到两边“的效果写的不是很好,改了一下,感觉可以了!*/<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var image; var in

基于html5水波的加载特效

先来看效果  图片2,利用canvas生成得到. var aImgArr = [ "http://xinhuatone.com/zt/apecxjp/m/images/4.jpg", "http://xinhuatone.com/zt/apecxjp/m/images/5.jpg", "http://xinhuatone.com/zt/apecxjp/m/images/6.jpg", "http://xinhuatone.com/zt/

前端脱坑日记之加载特效制作1

相信大家在生活中已经对加载界面已经非常熟悉,一个优美的加载界面绝对让你好感度大增,不说废话了让我们来看看代码吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstr

Android中级篇之Fresco-更灵活的设置加载特效[Java代码实现XML效果]

之前我们学会了如何在XML中设置各项特效的属性,可是在日常开发中,我们的需求是变化莫测的,不可能是提前在XML声明好,也不是所有的控件都写在XML里面:于是用Java代码控制各项特效属性就显得格外重要,掌握这一重要技能势在必得! 阅读更多详情:http://blog.csdn.net/y1scp/article/details/49593319

loading(正在加载特效)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script> <title></title> <script type=&q