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. [BZOJ2716] [Violet 3]天使玩偶(CDQ分治)

    [BZOJ2716] [Violet 3]天使玩偶(CDQ分治) 题面 Ayu 在七年前曾经收到过一个天使玩偶,当时她把它当作时间囊埋在了地下.而七年后 的今天,Ayu 却忘了她把天使玩偶埋在了哪里, ...

  2. Python实现视频片头和片尾添加

    import imageio imageio.plugins.ffmpeg.download() from datetime import datetime import os from moviep ...

  3. python学习第四十三天生成器和next()关联

    我们在用列表生成式的时候,如果有一百万的数据,内存显然不够用,这是python想要什么数据,就生产什么数据给你,就产生了生成器,下面简单讲述生成器用法 1,生成器的用法 a=([a*a for a i ...

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

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

  5. spark sql 创建DataFrame

    SQLContext是创建DataFrame和执行SQL语句的入口 通过RDD结合case class转换为DataFrame 1.准备:hdfs上提交一个文件,schema为id name age, ...

  6. 编辑器和IDE的区别以及WebStorm和PhpStorm的区别

    编辑器和IDE的区别: 编辑器就是纯粹编辑文本的编辑器,识别级别在文字级,只显示你想写入和打开的文本内容,不管你写什么内容,只提供接收与显示功能,Windows自带的写字板就是最简单的编辑器.举个生活 ...

  7. DbArithmeticExpression arguments must have a numeric common type.

    引用 system.data.linq

  8. thinkphp 模板变量输出替换和赋值

    一.变量输出的几个方法 <?php namespace app\index\controller; use http\Params; use think\Config; use think\Co ...

  9. HTML表单(来自MDN的总结)

    表单介绍 HTML表单是用户和web站点或应用程序之间交互的主要内容之一.它们允许用户将数据发送到web站点.大多数情况下,数据被发送到web服务器,但是web页面也可以拦截它自己并使用它. HTML ...

  10. spring boot 集成 websocket 实现消息主动推送

    spring boot 集成 websocket 实现消息主动 前言 http协议是无状态协议,每次请求都不知道前面发生了什么,而且只可以由浏览器端请求服务器端,而不能由服务器去主动通知浏览器端,是单 ...