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. 引入maven以外的jar包

    这里有2个案例,需要手动发出Maven命令包括一个 jar 到 Maven 的本地资源库. 要使用的 jar 不存在于 Maven 的中心储存库中. 您创建了一个自定义的 jar ,而另一个 Mave ...

  2. 05-CSS浮动、定位、页面布局

    # 浮动 ### 文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置. # ...

  3. JVM Heap Memory和Native Memory

    JVM管理的内存可以总体划分为两部分:Heap Memory和Native Memory.前者我们比较熟悉,是供Java应用程序使用的:后者也称为C-Heap,是供JVM自身进程使用的.Heap Me ...

  4. 团队中的 Git 实践

    转载自:https://segmentfault.com/a/1190000004963641 本文首发于欧雷流.由于我会时不时对文章进行补充.修正和润色,为了保证所看到的是最新版本,请阅读原文. 在 ...

  5. python面向对象的三大特征--多态

    #什么是多态:由不同的类实例化得到的对象,调用同一个方法,执行的逻辑不同 #多态体现在由一个类实例化出多个对象,这些对象执行相同的方法时,执行的过程和结果不一样--不同的对象调用相同的方法 #多态的概 ...

  6. 什么是shader?

    一.什么是shader? shader是一段GLSL(openGL着色语言)小程序,运行在GPU(图形处理器),而非CPU使用GLSL语言编写,看上去像c或c++,但却是另外一种不同的语言.使用sha ...

  7. Centos7 tomcat 启动权限

      Cannot find bin/catalina.sh The file is absent or does not have execute permission This file is ne ...

  8. 【串线篇】spring boot自动配置原理

    配置文件到底能写什么?怎么写?自动配置原理: 配置文件能配置的属性参照 一.自动配置原理: 1.1.SpringBoot启动的时候加载主配置类,开启了自动配置功能 @EnableAutoConfigur ...

  9. bzoj1706 [usaco2007 Nov]relays 奶牛接力跑 矩阵快速幂

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1706 题解 换个方法定义矩阵乘法:先加再取 \(\min\). 对于一个 \(n\times ...

  10. flask之环境的搭建

    一.查看ubantu上是否安装虚拟环境的包 virtualenv --version 这里显示的是:15.0.1的版本,如果没有的话, sudo pip install virtualenv sudo ...