h5canvas绘制loading页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百分比加载</title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas'), //获取canvas元素
context = canvas.getContext('2d'), //获取画图环境,指明为2d
centerX = canvas.width/2, //Canvas中心点x轴坐标
centerY = canvas.height/2, //Canvas中心点y轴坐标
rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
speed = 0.1; //加载的快慢
//绘制外圈
function blueCircle(n){
context.save();//保存当前环境的状态(save和restore可以保证样式属性只运用于该段canvas元素)
context.strokeStyle = "#49f"; //设置描边样式
context.lineWidth = 5; //设置线宽
context.beginPath(); //路径开始
context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
context.stroke(); //绘制
context.closePath(); //路径结束
context.restore();//返回之前保存过的路径状态和属性
}
//绘制白色外圈
function whiteCircle(){
context.save();
context.beginPath();
context.strokeStyle = "#fff";
context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
}
//百分比文字绘制
function text(n){
context.save();
context.strokeStyle = "#fff"; //设置描边样式
context.font = "40px Arial"; //设置字体大小和字体
//绘制字体,并且指定位置
context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
context.stroke(); //执行绘制
context.restore();
}
//动画循环
(function drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);//requestAnimationFrame作用与setTimeInterval一样,不同的是它会根据浏览器的刷新频率自动调整动画的时间间隔。
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if(speed > 100){
speed = 0;
}else{
speed += 0.1;
}
}());
}
</script>
</body>
</html>
h5canvas绘制loading页面的更多相关文章
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- flutter 延时函数delay Loading页面
loading 页面 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Lo ...
- android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面
android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面 首先写添加到数据库 在DBOpenHelper中添加创建记账表的语句 //创建记账表 sql = "c ...
- 运用webkit绘制渲染页面原理解决iscroll4闪动的问题
原:http://www.iunbug.com/archives/2012/09/19/411.html 已经有不少前端同行抱怨iScroll4的各种问题,我个人并不赞同将这些问题归咎于iScroll ...
- SVG绘制loading效果
<div class="loading"> <svg width='40px' height='40px' xmlns="http://www.w3.o ...
- 正在载入中......loading页面的几种方法
网页加载过程中提示“载入中…”,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错.下面介绍几种方法. 第一种: 原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在 ...
- 拒绝枯燥,有意思的 Loading 页面动效设计
互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快,一般页面缓冲和加载地过程也是几不可查.然而,在某些情况下,例如软件急需加载大量页面,首页急需加载大量内容,用户下载文件过大,甚至是 ...
- 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...
- 带蒙版的提交loading页面实现
废话不多说,直接上代码. 首先是HTML中层的实现: <!-- loading 层 --> <div id="loadingDivBack" style=&quo ...
随机推荐
- 网站文章分享到微博,微信、qq空间--举例用织梦
有对应接口的,传递参数过去就行了,注意下面的{..},需要替换为你的内容,看参数名称你应该知道是什么东东 新浪地址接口http://service.weibo.com/share/share.php? ...
- eclipse手动安装alibaba代码规范插件
如果你的开发环境无法访问外网,那么手动安装阿里巴巴的代码规范插件是一个不错的选择.另外,很多教程说该插件需要jdk1.8以上,我试了一下jdk1.7也是可以运行的,更低的版本就不知道了,貌似jdk1. ...
- UIButton 设置图片文字垂直居中排列
#pragma mark 按钮图片文字垂直居中排列 -(void)setButtonContentCenter:(UIButton *)button { CGSize imgViewSize,titl ...
- Spring Environment(一)API 介绍
Spring Environment(一)API 使用 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring 3. ...
- Python之路(第十篇)迭代器协议、for循环机制、三元运算、列表解析式、生成器
一.迭代器协议 a迭代的含义 迭代器即迭代的工具,那什么是迭代呢? #迭代是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果都是下一次迭代的初始值 b为何要有迭代器? 对于序列类型:字符串.列表 ...
- 摹客iDoc201901-2新功能点评
2019才刚刚开始,摹客团队就已经蓄势待发.马不停蹄地给大家带来了又一份惊喜.实话说,这次小摹都忍不住要点个赞!下面就赶紧带大家看看iDoc又更新了哪些新功能: 1.标注和评论融合.协作更高效 iDo ...
- Squares of a Sorted Array LT977
Given an array of integers A sorted in non-decreasing order, return an array of the squares of each ...
- 【WebService】WebService基础知识(一)
WebService是什么? 1. 基于Web的服务:服务器端整出一些资源让客户端应用访问(获取数据) 2. 一个跨语言.跨平台的规范(抽象) 3. 多个跨平台.跨语言的应用间通信整合的方案(实际) ...
- NOIP训练测试3(2017081601)
上一波题还是比较水的吧?[?????] 也许吧! 但时间还是比较紧的,所以我从2.5个小时延长至3个小时了. 不管了,做题不能停,今天继续测试. 水不水自己看,我什么也不说(zhe shi zui h ...
- Python开课复习9-28
一.什么是迭代器#迭代器即迭代的工具,那什么是迭代呢?#迭代是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果都是下一次迭代的初始值 举例: l=[1,2,3] count=0 while co ...