canvas绘制加载特效
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绘制加载特效的更多相关文章
- Vue-Router 页面正在加载特效
Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...
- 基于iscroll.js实现下拉刷新和上拉加载特效
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
- 纯css3实现的动画加载特效
之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="wrap& ...
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- 一款由jquery实现的超炫的页面加载特效
今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- css 跑马灯加载特效
css 跑马灯加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
- CSS 海盗船加载特效
CSS 海盗船加载特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
- canvas百分比加载动画
window.onload = function(){ var canvas = document.getElementById('canvas'), //获取canvas元素 context = c ...
随机推荐
- Java方法多态性——方法的重载Overload和重写Override
方法的重写(Overriding)和重载(Overloading)是java多态性的不同表现,重写是父类与子类之间多态性的一种表现,重载可以理解成多态的具体表现形式. 重写(Override) 重写是 ...
- 左侧点击后右侧添加tab标签栏以及内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 什么是dockerfile?
什么是dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档.可以使用在命令行中调用任何命令. Docker通过读取Dockerfile中的指令自动生成映像. docker ...
- 帝国CMS链接域名重写、伪静态处理
需求:将 www.abc.com/e/tags?tagsid=1 改写成 www.abc.com/softlink/1.html形式: 环境:Windows服务器: 路径:D:/web/www.ab ...
- R语言——ggplot2补充知识点
案例 ggplot(head(age_data,10),aes(x=reorder(Country,age_median),y=age_median))+ geom_bar(aes(fill=Coun ...
- DNS服务的安装
DNS服务器原理及配置 域名讲解 www.baidu.com 完整的域名,通常.来进行分割三个部分:www是主机名,baidu是域名,com是类型 主机名 + 域名 + 类型 构成完整的域名 DNS服 ...
- nginx的RPM包制作案例
使用nginx-1.12.2版本的源码软件,生成对应的RPM包软件,具体如下: - 软件名称为nginx - 软件版本为1.12.2 - RPM软件包可以查询描述信息 - RPM软件包可以安装及卸载 ...
- Oracle 索引数据字典、基于函数的索引
user_indexes 字典视图包含了索引名和唯一性, user_ind_columns视图包含了索引名.表名.以及列名 dba_indexes dba_ind_columns 同理 select ...
- 命令行界面CLI
1.hive -e --执行一个或多个查询 hive -e "select * from student limit 3" 2. hive -e > 将临时查询保 ...
- JSON.stringify常见用法
转摘于其他博客 var data =[ { name: "金",sex:"1",age:26 }, { name: "才",sex:&quo ...