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做一个百分比加载进度的动画的更多相关文章

  1. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  2. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  3. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  4. 【CSS】333- 使用CSS自定义属性做一个前端加载骨架

    点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多 ...

  5. JQ加载进度条动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 灵活、可高度自定义的——Progress进度圈、弹窗、加载进度、小菊花

    DDProgressHUD的介绍 提供了四种类型的展示: 显示无限旋转的加载图(比如小菊花,可以自定义),显示文字信息.网络刷新时经常用到. 显示加载进度的动画,也可以显示文字.网络下载时用的比较多, ...

  7. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  8. WPF 多线程 UI:设计一个异步加载 UI 的容器

    对于 WPF 程序,如果你有某一个 UI 控件非常复杂,很有可能会卡住主 UI,给用户软件很卡的感受.但如果此时能有一个加载动画,那么就不会感受到那么卡顿了.UI 的卡住不同于 IO 操作或者密集的 ...

  9. js 百分比显示页面加载进度

    做东西遇到显示页面百分比的加载进度,不过里面的图片较多,看了别人的代码,才想到可以通过图片的加载显示加载的百分比,做一下笔记: html: <span id="percent" ...

随机推荐

  1. STL的迭代器和类型萃取

    今天就可以把STL库中迭代器的实现,和类型萃取好好整理一下了 迭代器的设计思维是STL的关键所在,在STL的实际运用和泛型思维,迭代器都扮演着十分重要的角色,STL力求把数据容器和算法的概念分开来,于 ...

  2. Android Service完全解析,关于服务你所需知道的一切(下)

    转载请注册出处:http://blog.csdn.net/guolin_blog/article/details/9797169 在上一篇文章中,我们学习了Android Service相关的许多重要 ...

  3. Angular常用功能

    1.默认选择让第0个元素的class为active ng-class="{active:$index == 0}" 2.指令的例子 <!DOCTYPE html> &l ...

  4. 原生ajax基础

    /*ajax对象的成员常用属性:responseText:以字符串形式接收服务器端返回的信息responseXML:以Xml Document对象形式接收服务器返回的信息readyState:返回当前 ...

  5. easyUI datagraid的列排序

    在给datagraid做多列排序时请注意: 首先,做的是后台排序,那么需要设置: remoteSort:'true', 然后,不要添加 multiSort:'true',这个是多列一起排序无法实现.. ...

  6. springboot使用之一:连接生产数据库,添加连接池

    项目中,难免遇到连接数据库的情形,目前来说springboot连接mybatis有两种,我这边使用的是mybatis官方提供XML方式的整合. 后面,对项目进行完善,引入了连接池,PageHelper ...

  7. PowerPoint

    工具/原料 PowerPoint 2007 百度经验:jingyan.baidu.com 一.PowerPoint2007基础知识 1 桌面快捷方式:也可以“开始”菜单→程序→Microsoft Of ...

  8. [转] 多进程下数据库环境的恢复:DB_REGISTER

    http://www.cnblogs.com/promise6522/archive/2012/05/09/2493542.html

  9. Android服务开机自启动

    新任务需要Android程序开机跑一个服务,查找资料得出如下方法: 用广播的方法监听系统启动事件:android.intent.action.BOOT_COMPLETED 并在AndroidManif ...

  10. 更改Android Studio的主题背景

    看到别人炫酷的主题,好奇心使然,想要选择一个自己喜欢的炫酷背景,于是乎百度,动手尝试更换各种主题. 保存下来,留着以后想换主题的时候看. 1.Android Studio自带主题 File -> ...