初识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"), //获取canvascontext = 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>

转载于:https://www.cnblogs.com/libin-1/p/6149071.html

初识canvas，使用canvas做一个百分比加载进度的动画相关推荐

[html] 请实现一个网站加载进度条
[html] 请实现一个网站加载进度条 import { memo } from 'react'; import { useLifecycles } from 'react-use'; import ...
CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
在vue中使用d3做一个动态加载的树形图
树形图数据量可能会很大,一次性全部加载可能会有延迟,所以一开始只加载一层节点的数据,当我们点击节点去展开的子节点的时候,再通过请求去加载子节点的数据,并更新到树上本demo中还添加了放大缩小.点击节 ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
flutter 如何自定义一个loadmore / 加载更多
写在前面这类的库在pub上有很多我为什么要自定义呢首先是项目需要,并且这种库普适性高,抽取出来今后复用也方便点另外记录一下编码思路,方便后续查看 pub地址 pub国内镜像 github 使用 ...
如何使用selenium webdriver来判断一个网页加载完毕
想实现一个加载网页计时的功能,如何用selenium webdriver实现判断一个网页加载完毕? ================================================== ...
如何开发一个 WPS 加载项
WPS 加载项是一套基于 Web 技术用来扩展 WPS 应用程序的解决方案.每个 WPS 加载项都对应打开了一个网页,并通过调用网页中 JavaScript 方法来完成其功能逻辑. WPS 加载项打开 ...
android 图标弹跳动画,动效教程 | 5 分钟快速做个弹跳加载小动画
小编:APP的动效现今是越来越重要了,以前是加分项,现在是必会技能-今天给大家带来的是AE动效教程 -- 5 分钟快速做个弹跳加载小动画,一起来学习学习吧-- 前言哈喽,今天给大家解禁一个墨染动效特 ...
自己设计一个图片加载框架
尊重他人的劳动成果,转载请标明出处:http://blog.csdn.net/gengqiquan/article/details/53064858, 本文出自:[gengqiquan的博客] 项目使 ...

初识canvas，使用canvas做一个百分比加载进度的动画

初识canvas，使用canvas做一个百分比加载进度的动画相关推荐

最新文章

热门文章