canvas绘制环形进度条
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="author" content="xuyunfei">
<meta name="description" content="">
<meta name="keywords" content="test,html">
<title>环形进度条</title>
</head>
<body>
</br></br></br></br> <div style="width:300px; height:300px; margin:20px auto">
<canvas id="canvas" width="300" height="300">
<p>抱歉，您的浏览器不支持canvas</p>
</canvas>
</div> <script type="text/javascript">
function toCanvas(id ,progress){
// canvas进度条
var canvas = document.getElementById(id),
ctx = canvas.getContext("2d"),
percent = progress, //最终百分比
circleX = canvas.width / 2, //中心x坐标
circleY = canvas.height / 2, //中心y坐标
radius = 100, //圆环半径
lineWidth = 5, //圆形线条的宽度
fontSize = 20; //字体大小
//两端圆点
// function smallcircle1(cx, cy, r) {
// ctx.beginPath();
// //ctx.moveTo(cx + r, cy);
// ctx.lineWidth = 1;
// ctx.fillStyle = '#06a8f3';
// ctx.arc(cx, cy, r,0,Math.PI*2);
// ctx.fill();
// }
// function smallcircle2(cx, cy, r) {
// ctx.beginPath();
// //ctx.moveTo(cx + r, cy);
// ctx.lineWidth = 1;
// ctx.fillStyle = '#00f8bb';
// ctx.arc(cx, cy, r,0,Math.PI*2);
// ctx.fill();
// } //画圆
function circle(cx, cy, r) {
ctx.beginPath();
//ctx.moveTo(cx + r, cy);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#eee';
ctx.arc(cx, cy, r, 0, (Math.PI*2),true);
ctx.stroke();
} //画弧线
function sector(cx, cy, r, startAngle, endAngle, anti) {
ctx.beginPath();
//ctx.moveTo(cx, cy + r); // 从圆形底部开始画
ctx.lineWidth = lineWidth; // 渐变色 - 可自定义
// var linGrad = ctx.createLinearGradient(
// circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY
// );
// linGrad.addColorStop(0.0, '#06a8f3');
//linGrad.addColorStop(0.5, '#9bc4eb');
// linGrad.addColorStop(1.0, '#00f8bb');
// ctx.strokeStyle = linGrad;
ctx.strokeStyle = 'red'; //圆弧两端的样式
ctx.lineCap = 'round'; //圆弧
// ctx.arc(
// cx, cy, r,
// -1.5,
// -1.5 + endAngle/100 * (Math.PI*5/3),
// false
// );
ctx.arc(
cx, cy, r,
(Math.PI*-1/2),
(Math.PI*-1/2) + endAngle/100 * (Math.PI*2),
false
);
ctx.stroke();
} //刷新
function loading() {
if (process >= percent) {
// clearInterval(circleLoading);
process = 0.0;
} //清除canvas内容
ctx.clearRect(0, 0, circleX * 2, circleY * 2); //中间的字
ctx.font = fontSize + 'px April';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#999';
ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY); //圆形
circle(circleX, circleY, radius); //圆弧
sector(circleX, circleY, radius, (Math.PI*-1/2), process);
//两端圆点
// smallcircle1(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 5);
// smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 5);
//控制结束时动画的速度
// if (process / percent > 0.90) {
// process += 0.30;
// } else if (process / percent > 0.80) {
// process += 0.55;
// } else if (process / percent > 0.70) {
// process += 0.75;
// } else {
process += 1.0;
// }
} var process = 0.0; //进度
var circleLoading = window.setInterval(function () {
loading();
}, 1000); } //第二部分，调用封装好的代码：
toCanvas('canvas',100); </script>
</body>
</html>
canvas绘制环形进度条的更多相关文章
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- canvas 绘制环形进度条
结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- canvas绘制圆形进度条（或显示当前已浏览网页百分比）
使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...
- Canvas实现环形进度条
Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...
- canvas 绘制圆形进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用canvas实现环形进度条
html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- CSS3绘制环形进度条
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- canvas环形进度条
<style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...
- iOS带动画的环形进度条(进度条和数字同步)
本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...
随机推荐
- JS案例六_2：省市级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 关于WCF服务 http://XXXXXX/XXX/xxx.svc不支持内容类型 application/sop+xml;charset=utf-8 错误解决方法
有时候用IIS部署一个WCF服务时,无论是在客户端还是在服务端通过地址都能正常访问. 但是当你在客户端添加服务引用时, 怎么也添加不上, 会碰到了如下错误: 好啦. 现在说说怎么解决吧. 其实很简单. ...
- linux 迁移项目ProtocolException
背景:服务器跟换机房,虚拟机完整迁移项目,只修改ip和主机名 1.检查/etc/hosts 中ip 和主机名映射 2.检查网络端口是否有限制以及端口开放是否全了,检查ip有没有配对.RMI注册不上.
- shiro三连斩之第二斩（SSM）
在SSM框架中使用shiro.环境 使用idea工具. 最主要的大概是配置文件如何配置吧. 1配置maven依赖 <?xml version="1.0" encoding=& ...
- 修改hbuilder背景颜色为护眼模式
复制以下代码,保存为.tmTheme文件导入HBuilder <?xml version="1.0" encoding="UTF-8"?> < ...
- shell练习题7
需求如下: 输入一串随机数字,然后按千分位输出. 例如:输入随机数字为"123456789",输出为123,456,789 参考解答如下 -方法1 [root@lanquark s ...
- python模块和包（模块、包、发布模块）
模块和包 目标 模块 包 发布模块 01. 模块 1.1 模块的概念 模块是 Python 程序架构的一个核心概念 每一个以扩展名 py 结尾的 Python 源代码文件都是一个 模块 模块名 同样也 ...
- find命令配合sed命令使用
1.查找当前目录下所有以txt文件中包含123的数字都替换成5678 find ./ -name "*.txt" -exec grep "123" {} \; ...
- bottle.py中的路由解析代码
# Routing def compile_route(route): """ Compiles a route string and returns a precomp ...
- 微信小程序拒绝授权，反复调起原生授权框。
最近堕落了,有一阵子没有更新博客园了.一是比较忙,其次也没什么好的题材和工作中的解决方案可以分享的,想想还是把罕见的反复调起原生小程序授权框的方案拿出来说说. 市面上常见的解决方案是第一次拒绝后, ...