<!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. BZOJ3191或洛谷2059 [JLOI2013]卡牌游戏

    BZOJ原题链接 洛谷原题链接 我们可以倒着来\(DP\). 设\(f[i][j]\)表示剩余\(i\)个人,从庄家数起第\(j\)个人的胜率,设当前枚举到第\(k\)张牌,该情况下这一轮淘汰的位置为 ...

  2. 20172306《Java程序设计与数据结构》第八周学习总结

    20172306<Java程序设计>第8周学习总结 教材学习内容总结 第十章最开始自己看的时候,没怎么看懂,等老师讲完之后,又看了一遍,就理解了很多.第十章主要学习了以下几点: 1.对于几 ...

  3. C++动态链接库

    1.动态链接库概述: 动态链接库通常都不能直接运行,也不能接受消息:只有在其他模块调用动态链接库中的函数时,它才发挥作用. Windows API中所有的函数都包含在动态链接库中. 动态链接库分静态库 ...

  4. ApplicationContext（九）初始化非延迟的 bean

    ApplicationContext(九)初始化非延迟的 bean 此至,ApplicationContext 已经完成了全部的准备工作,开始初始化剩余的 bean 了(第 11 步). public ...

  5. rm命令删除文件时排除特定文件

    删除文件时排除特定文件 www.python  tab.com/html/2013/linuxkaiyuan_0205/214.html 删除当前目录下所有 *.txt文件,除了test.txt 1 ...

  6. Koko Eating Bananas LT875

    Koko loves to eat bananas.  There are N piles of bananas, the i-th pile has piles[i] bananas.  The g ...

  7. Sliding Window Maximum LT239

    Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...

  8. robot framework 中should be true 与should contain 的区别

    should be true  是否等于:判断是否should contain  是否包含 a是否包含b

  9. AnsiToUtf8 和 Utf8ToAnsi

    在服务端数据库的处理当中,涉及中文字符的结构体字段,需要转为Utf8后再存储到表项中.从数据库中取出包含中文字符的字段后,如果需要保存到char *类型的结构体成员中,需要转为Ansi后再保存.从数据 ...

  10. 日志分析工具、日志管理系统、syslog分析

    日志分析工具.日志管理系统.syslog分析 系统日志(Syslog)管理是几乎所有企业的重要需求.系统管理员将syslog看作是解决网络上系统日志支持的系统和设备性能问题的关键资源.人们往往低估了对 ...