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. vue自定义组件(通过Vue.use()来使用)即install的使用

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个loading.vue文件 // Cmponent.vue <te ...

  2. 洛谷 P2024 [NOI2001]食物链(种类并查集,加权并查集)

    传送门 解题思路 加权并查集: 什么是加权并查集? 就是记录着每个节点到它的父亲的信息(权值等). 难点:在路径压缩和合并节点时把本节点到父亲的权值转化为到根节点的权值 怎么转化呢? 每道题都不一样Q ...

  3. 使用IntelliJ IDEA配置Tomcat(详细操作)

    一,下载Tomcat 1.进入官网Http://tomcat.apache.org/,选择download,下载所需要的Tomcat版本.(注意:最好下载Tomcat 7 或者Tomcat 8 因为最 ...

  4. django 开发中数据库做过什么优化??

    1.设计表时,尽量少使用外键,因为外键约束会影响插入和删除性能: 2.使用缓存,减少对数据库的访问: 3.在 orm 框架下设置表时,能用 varchar 确定字段长度时,就别用 text: 4.可以 ...

  5. git把本地代码上传(更新)到github上

    # 初始化目录为本地仓库 git init # 添加所有文件到暂存去 git add . # 提交所有文件 git commit -m "init" # 添加远程仓库地址 git ...

  6. InvalidMappingException提示Could not parse mapping document错误的解决方法

    转自:http://www.itzhai.com/invalidmappingexception-could-not-parse-mapping-document-prompt-the-wrong-s ...

  7. Sql 使用游标

    DECLARE data_cursor CURSOR FOR WITH T0 AS ( SELECT COUNT(f.DeptID) SubmitCount , f.DeptID FROM biz.F ...

  8. 如何启用Nginx的status功能,查看服务器状态信息?

    如何查看服务器状态信息? 我们可以通过安装Nginx的功能模块,并修改Nginx的主配置文件来实现. 1.编译安装时使用--with-http_stub_status_module开启状态页面模块 [ ...

  9. 初学Java 二维数组找出最近的两个点

    import java.util.Scanner; public class FindNearestPoints { public static void main(String[] args) { ...

  10. HTML5 中list 和datalist实例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...