<!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页面的更多相关文章

  1. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  2. flutter 延时函数delay Loading页面

    loading 页面 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Lo ...

  3. android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面

    android软件简约记账app开发day06-将记账条目添加到数据库并且绘制备注页面 首先写添加到数据库 在DBOpenHelper中添加创建记账表的语句 //创建记账表 sql = "c ...

  4. 运用webkit绘制渲染页面原理解决iscroll4闪动的问题

    原:http://www.iunbug.com/archives/2012/09/19/411.html 已经有不少前端同行抱怨iScroll4的各种问题,我个人并不赞同将这些问题归咎于iScroll ...

  5. SVG绘制loading效果

    <div class="loading"> <svg width='40px' height='40px' xmlns="http://www.w3.o ...

  6. 正在载入中......loading页面的几种方法

    网页加载过程中提示“载入中…”,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错.下面介绍几种方法. 第一种: 原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在 ...

  7. 拒绝枯燥，有意思的 Loading 页面动效设计

    互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快,一般页面缓冲和加载地过程也是几不可查.然而,在某些情况下,例如软件急需加载大量页面,首页急需加载大量内容,用户下载文件过大,甚至是 ...

  8. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.

    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...

  9. 带蒙版的提交loading页面实现

    废话不多说,直接上代码. 首先是HTML中层的实现: <!-- loading 层 --> <div id="loadingDivBack" style=&quo ...

随机推荐

  1. HTML知识基础

    HTML 超文本标记语言(Hyper  Text  Markup Language):是一种用于创建网页的标准标记语言. Hyper  Text:指具有交互功能文本. Markup Language: ...

  2. windows netcdf vs 配置

    程序中添加的头文件是netcdfcpp.h文件   ************************************************************************** ...

  3. 比较两个List列表，取得List中不同项返回

    /// <summary> /// 比对模型及属性数组 /// </summary> /// <typeparam name="TM">< ...

  4. c++课设学生成绩与学籍管理系统

    题目要求(手打,累):设计一个类CStudent,类中包含一个学生的基本数据如下: 编号,姓名,性别,年龄,数学成绩,计算机成绩,外语成绩. 并假设编号为整数,且从1号往后连续编码:姓名为字符串,性别 ...

  5. 深浅copy和字符串细节方法

    copy a=[1,2,3]b=aid(a)55499272id(b)55499272 id()就是查看内存地址,是不是同一个对象. c=a.copy()id(c)57940040 可见copy()出 ...

  6. de4dot破解脱壳新版MaxtoCode源数组长度不足解决办法

    之前在看雪混了4年.NET破解版主,现在转战这里,发现很多人还在玩的是工具类的破解,可以说这里的人都还是皮毛啊 最近很多人问使用de4dot脱壳MaxtoCode有问题,之前写过一个教程,那是工具篇的 ...

  7. Spring Boot REST（二）源码分析

    Spring Boot REST(二)源码分析 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) SpringBoot RE ...

  8. 无法嵌入互操作类型"ESRI.ArcGIS.Carto.MapDocumentClass".请改用适用的接口

    在对地图文档进行操作时,居然出现如下问题: IMapDocument m_MapDocument = new ESRI.ArcGIS.Carto.MapDocumentClass(); 报错: 无法嵌 ...

  9. DB2 OLAP函数的使用

    说起 DB2 在线分析处理,可以用很好很强大来形容.这项功能特别适用于各种统计查询,这些查询用通常的SQL很难实现,或者根本就无发实现.首先,我们从一个简单的例子开始,来一步一步揭开它神秘的面纱,请看 ...

  10. jrebel

    jrebel 编辑   JRebel是一套JavaEE开发工具.JRebel允许开发团队在有限的时间内完成更多的任务修正更多的问题,发布更高质量的软件产品. JRebel是收费软件,用户可以在JReb ...