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. [2019杭电多校第四场][hdu6614]AND Minimum Spanning Tree(贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6614 题目大意是有一张n个点的完全图,n个点点权为1-n,边权为两点点权按位与(&).求最小生 ...

  2. dp(买票优惠)

    CodeForces - 1154F There are n shovels in the nearby shop. The i-th shovel costs ai bourles. Misha h ...

  3. React项目 - 几种CSS实践

    前言团队在使用react时,不断探索,使用了很多不同的css实现方式,此篇blog总结了,react项目中常见的几种css解决方案:inline-style/radium/style-componen ...

  4. 如何在CentOS 7上安装newman

    前提:先安装nodejs,详见:如何在CentOS 7上安装Node.js和npm #sudo npm install -g newman 结果: /usr/local/bin/newman -> ...

  5. 树莓派Pi账户密码简单重置

    由于经常忘记树莓派Pi账户的密码而导致无法正常的玩树莓派,本篇文章综合网上的教程,总结了两种快速重置树莓派Pi账户密码的方法,以下一切操作都需在树莓派本机上进行操作. 方法一: 打开终端,执行 sud ...

  6. 搜索(DFS)---矩阵中的连通分量数目

    矩阵中的连通分量数目 200. Number of Islands (Medium) Input: 11000 11000 00100 00011 Output: 3 题目描述:   给定一个矩阵,求 ...

  7. HTML创建链接框

    使用CSS样式创建一个漂亮的链接框吧 <!DOCTYPE html> <html> <head> <style> a:link,a:visited { ...

  8. Django集合Ueditor

    语言版本环境:python3.6 1.win安装步骤: git下载源码https://github.com/zhangfisher/DjangoUeditor 解压DjangoUeditor3-mas ...

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

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

  10. Solr从数据库导入数据(DIH)

    一. 数据导入(DataImportHandler-DIH) DIH 是solr 提供的一种针对数据库.xml/HTTP.富文本对象导入到solr 索引库的工具包.这里只针对数据库做介绍. A.准备以 ...