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);

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

  1. Vue-Router 页面正在加载特效

    Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...

  2. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  3. 纯css3实现的动画加载特效

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

  4. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

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

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

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

    今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览   源码下载 实现的代码. ...

  7. css 跑马灯加载特效

    css 跑马灯加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  8. CSS 海盗船加载特效

    CSS 海盗船加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  9. canvas百分比加载动画

    window.onload = function(){ var canvas = document.getElementById('canvas'), //获取canvas元素 context = c ...

随机推荐

  1. [BZOJ1492] [NOI2007] 货币兑换Cash(cdq分治+斜率优化)

    [BZOJ1492] [NOI2007] 货币兑换Cash(cdq分治+斜率优化) 题面 分析 dp方程推导 显然,必然存在一种最优的买卖方案满足:每次买进操作使用完所有的人民币:每次卖出操作卖出所有 ...

  2. 牛客练习赛51 C 勾股定理https://ac.nowcoder.com/acm/contest/1083/C

    题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角三角形. 输入描述: 一个整数n. 输出描述: 另外两条边b,c.答案不唯一,只要输出任意一组即为合理, ...

  3. display:table的几个用法 块级子元素垂直居中

    DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况. display:table解决了一部分需要使用表格特性但又不需要表格语义的情况, 尤其是DIV+CSS很不方便解决的问题,比 ...

  4. Redis 和 MongoDB 的优缺点??

    MongoDB 和 Redis 都是 NoSQL,采用结构型数据存储.二者在使用场景中,存在一定的区别, 这也主要由于二者在内存映射的处理过程,持久化的处理方法不同.MongoDB 建议集群部署,更多 ...

  5. Python 的 time 模块导入及其方法

    时间模块很重要,Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能,讲解一下Python 的 time 模块导入及其方法. 1,time 模块导入 import time; # ...

  6. ORI-621龙芯3A处理器CPCI刀片计算机

    ORI-621龙芯3A处理器CPCI刀片计算机 一.产品简介 ORI -621是一款基于龙芯3A国产CPU处理器的特种CPCI刀片计算机.该产品成功地实现了服务器NUMA架构在国产特种计算机中的应用, ...

  7. utf8 中文

    #include <iostream> #include <codecvt> #include <fstream> #include <string> ...

  8. luogu3350 [ZJOI2016]旅行者

    链接 P3350 [ZJOI2016]旅行者 题目大意:给出网格图,求两点之间最短路,多组询问. \(n*m\leq10^5\ \ q\leq 10^5\) 考虑\(CDQ\)分治. 首先把询问离线, ...

  9. django之创建项目

    1.创建虚拟环境 mkvirtualenv django_study -p python3 创建成功后:(django_study) python@ubuntu:~$ 2.安装django-指定版本1 ...

  10. pspice建立仿真模型元件库

    摘自:http://royroyyy.blog.163.com/blog/static/1376506172011026102216175/ PSpice9.2电子元器件模型--由网页下载的model ...