初识canvas，使用canvas做一个百分比加载进度的动画
canvas作为H5中重要的新增特性，使开发者可以用它来创作各种令人惊叹的作品。先来看一下浏览器对canvas的支持情况。
<canvas> 标签定义图形，比如图表和其他图像，我们使用脚本来绘制图形。
先看一下这次动画的结果：
gif图可能不完整，可以点击这里查看完整效果。
canvas的API较多，这里我们只介绍一下本次使用到的一下API，更多的canvas可以查看这里。
beginPath() //重置或者开始当前路径
strokeStyle //设置笔触的颜色，即画出来的颜色
arc(x,y,r,sangle,eangle,boolean) //画一个圆弧，参数分别是：圆心的x，y轴、半径、起始点和结束点、逆时针还是顺时针
stroke() //绘制定义好的路径
font //设置字体的属性
lineWidth //绘制路径时线的宽度
strokeText(text,x,y) //绘制字体,参数分别是：要绘制的字、起始点的x、y坐标
clearRect(x,y,width,height) //清除矩形内所有的路径，参数分别是：矩形起点的x、y坐标、矩形的宽、高
save() //保存当前环境的状态
restore() //返回之前保存过的路径状态和属性下面我们来分析一下这个动画的组成，这个动画是由三部分组成的，分别是：外层的比较细的圆、比较粗的圆、内层的百分比数字。只要知道了它是由什么构成的，那么我们就可以一一画出它的样式了。
在画图之前我们需要先定义一些可能需要的变量，如画图的起点、圆心、半径之类的，如下：
var canvas = document.getElementById("canvas"), //获取canvas
context = canvas.getContext("2d"), //获取2d上下文
cirX = canvas.width/ 2, //canvas x轴的中点
cirY = canvas.height/ 2, //canvas y轴的中点
rad = Math.PI * 2 / 100, //360度的百分之一
n = 1, //从百分之n开始计算
speed = 150, //速度
r = 100; //半径首先我们来画一下外层比较细的圆，因为这个最简单，没有动画，只需要使用arc()函数来绘制就可以了，下面是绘制外圈的函数：
//绘制最外层细圈
function writeCircle(){
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.beginPath(); //开始路径
context.strokeStyle = "#49f"; //设置边线的颜色
context.arc(cirX, cirY, r, 0, Math.PI * 2, false); //画一个圆的路径
context.stroke(); //绘制边线
context.restore();
}接下来我们绘制内层的百分比数，需要用到font设置字体属性，strokeText()绘制数字，因为数字是动的，所以需要传入一个参数n来代表百分比的数字，为了防止传入的是小数，可以通过toFixed()设置小数点后有0位数，即没有小数，下面是函数：
//绘制文本
function writeText(n){
context.save();
context.strokeStyle = "#49f";
context.font = "40px Arial";
context.strokeText(n.toFixed(0)+"%",cirX - 30 ,cirY +10);
context.stroke();
context.restore();
}最后绘制外层粗线圆，这里通过lineWidth属性将边线设置比原始的粗即可，然后传入参数n，因为这个是按角度画的，所以n要乘以我们最上面定义的rad，即100%为360度，另外还要注意的是圆的起始点，arc()绘制圆的时候起始点是最右侧的点，而我们的起点需要是圆最上方的，所以起始角度应该为 -Math.PI/2，函数如下：
//绘制蓝色外圈
function writeBlue(n){
context.save();
context.strokeStyle = "#49f"; //设置边线颜色
context.lineWidth = 4; //设置边线宽度
context.beginPath();
context.arc(cirX, cirY, r, -Math.PI/2,-Math.PI/2+ rad*n, false); //画圆
context.stroke();
context.restore();
}通过上面三个函数，再加上动画，一个动态加载的百分比进度圈就完成了，下面是全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas加载动画</title>
<style>
body{
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="background: #000;">
您的浏览器不支持canvas
</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
cirX = canvas.width/ 2,
cirY = canvas.height/ 2,
rad = Math.PI * 2 / 100,
n = 1,
speed = 150,
r = 100;
//绘制最外层细圈
function writeCircle(){
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.beginPath(); //开始路径
context.strokeStyle = "#49f"; //设置边线的颜色
context.arc(cirX, cirY, r, 0, Math.PI * 2, false); //画一个圆的路径
context.stroke(); //绘制边线
context.restore();
}
//绘制文本
function writeText(n){
context.save();
context.strokeStyle = "#49f";
context.font = "40px Arial";
context.strokeText(n.toFixed(0)+"%",cirX - 30 ,cirY +10);
context.stroke();
context.restore();
}
//绘制蓝色外圈
function writeBlue(n){
context.save();
context.strokeStyle = "#49f";
context.lineWidth = 4;
context.beginPath();
context.arc(cirX, cirY, r, -Math.PI/2,-Math.PI/2+ rad*n, false);
context.stroke();
context.restore();
}
function DreamLoading(){
//清除所有，重新绘制
context.clearRect(0,0,canvas.width,canvas.height)
writeCircle();
writeText(n);
writeBlue(n)
if(n < 100){
n= n+0.1;
}else {
n = 0;
}
//setTimeout(DreamLoading,speed);
requestAnimationFrame(DreamLoading);
}
DreamLoading();
}
</script>
</body>
</html>初识canvas，使用canvas做一个百分比加载进度的动画的更多相关文章
- 《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 【CSS】333- 使用CSS自定义属性做一个前端加载骨架
点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多 ...
- JQ加载进度条动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花
DDProgressHUD的介绍 提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多, ...
- 利用@keyframe及animation做一个页面Loading时的小动画
前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1 @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...
- WPF 多线程 UI：设计一个异步加载 UI 的容器
对于 WPF 程序,如果你有某一个 UI 控件非常复杂,很有可能会卡住主 UI,给用户软件很卡的感受.但如果此时能有一个加载动画,那么就不会感受到那么卡顿了.UI 的卡住不同于 IO 操作或者密集的 ...
- js 百分比显示页面加载进度
做东西遇到显示页面百分比的加载进度,不过里面的图片较多,看了别人的代码,才想到可以通过图片的加载显示加载的百分比,做一下笔记: html: <span id="percent" ...
随机推荐
- Java 类反射机制分析
Java 类反射机制分析 一.反射的概念及在Java中的类反射 反射主要是指程序可以访问.检测和修改它本身状态或行为的一种能力.在计算机科学领域,反射是一类应用,它们能够自描述和自控制.这类应用通过某 ...
- C# v3微信 access token 过期处理的问题
//记录access token 申请时的时间 private static DateTime GetAccessToken_Time; /// <summary> /// 过期时间为72 ...
- 一种模拟position: sticky;的方法
直接上代码,本例采用了jQuery来进行介绍 CSS部分: .sticky { position: fixed; top: 0; } JS部分: var stickyBar = $('.sticky- ...
- 1036. Crypto Columns 2016 11 02
/* 对于题目多读几遍,然后再关键字排序的时候,把对应的数组序号也排序, EYDE MBLR THAN MEKT ETOE EOTH MEETME B ...
- mysql text字段判断是否为空
mysql text字段判断是否为空 mysql text字段为空select * from `tableName` where `textField` is null or `textField` ...
- How to copy remote computer files quickly to local computer
if we want copy file from VM(Remote VM) to local computer. Always can not easy copy file so easy. no ...
- swift禁用webView对H5中数字，链接，日期，地址，电话号码做解析
showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析 其UIDataDetectorTypes属性 ...
- Java LinkedList 源码剖析
LinkedList同时实现了List接口和Deque接口,也就是说它既可以看作一个顺序容器,又可以看作一个队列(Queue),同时又可以看作一个栈(Stack).这样看来,LinkedList简直就 ...
- Arcgis API For IOS扩展AGSDynamicLayer新旧版API对比
AGSDynamicLayer(ForSubclassEyesOnly) Category Reference Description This category organizes the meth ...
- 各种UIButton
前几日尝试了各种UIButton UIButton *btn0=[UIButton buttonWithType:UIButtonTypeContactAdd]; UIButton *btn1=[U ...