canvas_基于canvan绘制的双半圆环进度条
效果图
实现原理：
1.使用canvas绘制两个半圆弧，底图灰色半圆弧和颜色进度圆弧。
2.利用setInterval计时器，逐步改变颜色进度条，达到进度条的效果。
效果代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<canvas id="canvas" width="300" height="300">
</canvas> <script type="text/javascript">
function toCanvas(id, progress, progress2) {
//canvas进度条
var canvas = document.getElementById(id),
ctx = canvas.getContext("2d"),
percent = progress,
percent2 = progress2,
//最终百分比
circleX = canvas.width / 2, // 中心x坐标
circleY = canvas.height / 2, //中心y坐标
radius = 100, //圆环半径
lineWidth = 8, // 圆形线条的宽度
fontSize = 10; //字体大小 /*//两端圆点
function smallcircle1(cx, cy, r) {
ctx.beginPath();
ctx.lineWidth = 1;
ctx.fillStyle = '#06a8f3';
ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
ctx.fill();
} function smallcircle2(cx, cy, r) {
ctx.beginPath();
ctx.lineWidth = 1;
ctx.fillStyle = '#00f8bb';
ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
ctx.fill();
}*/ //画圆
function circle(cx, cy, r) {
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#eee';
ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
//ctx.arc(cx, cy, r, Math.PI * 2 / 3, Math.PI * 1 / 3);
ctx.stroke();
} //画弧线
function sector(cx, cy, r, startAngle, endAngle, anti) {
ctx.beginPath();
ctx.lineWidth = lineWidth; // 渐变色 - 可自定义
var linGrad = ctx.createLinearGradient(
circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY
);
linGrad.addColorStop(0.0, '#06a8f3');
linGrad.addColorStop(1.0, '#00f8bb');
ctx.strokeStyle = linGrad;
//圆弧两端的样式
ctx.lineCap = 'round';
ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + endAngle / 100));
ctx.stroke();
} //画弧线02
function sector2(cx, cy, r, startAngle, endAngle, anti) {
ctx.beginPath();
ctx.lineWidth = lineWidth; // 渐变色 - 可自定义
var linGrad = ctx.createLinearGradient(
circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY
);
linGrad.addColorStop(0.0, '#06a8f3');
linGrad.addColorStop(1.0, '#00f8bb');
ctx.strokeStyle = linGrad //圆弧两端的样式
ctx.lineCap = 'round';
ctx.arc(cx, cy, r * 3 / 4, Math.PI, Math.PI * (1 + endAngle / 100));
ctx.stroke();
}
//刷新
function loading() {
var percent3 = progress;
if(percent < percent2) percent = percent2;
if(process >= percent) clearInterval(circleLoading);
if(process2 >= percent) clearInterval(circleLoading);
//清除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*4/5);
ctx.fillText("月度完成比",circleX, circleY); //圆形
circle(circleX, circleY, radius); //圆弧
sector(circleX, circleY, radius, Math.PI * 2 / 3, process);
sector2(circleX, circleY, radius, Math.PI * 2 / 3, process2);
//两端圆点
//smallcircle1(50 + Math.cos(2 * Math.PI / 360 * 120) * 100, 150 + Math.sin(2 * Math.PI / 360 * 120) * 100, 5);
//smallcircle2(50 + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * 100, 150 + Math.sin(2 * Math.PI / 360 * (120 + process * 3)) * 100, 5);
//控制结束时动画的速度
if(process < percent3) {
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;
}
} if(process2 < percent2) {
if(process2 / percent > 0.90) {
process2 += 0.30;
} else if(process2 / percent > 0.80) {
process2 += 0.55;
} else if(process2 / percent > 0.70) {
process2 += 0.75;
} else {
process2 += 1.0;
}
} } var process = 0.0;
var process2 = 0.0; var circleLoading = window.setInterval(function() {
loading();
}, 20); }
toCanvas('canvas', 50, 80);
</script>
</body> </html>
canvas_基于canvan绘制的双半圆环进度条的更多相关文章
- 基于Vue的事件响应式进度条组件
写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...
- 写了一个基于React+Redux的仿Github进度条
曾经实现过Angular版,这次感觉用了高大上的React却写了更多的代码,需要的配置也更多了,有利有弊吧. 但这个“导航条问题”很有意思,涉及到在Redux中写timer,其实我很困惑,到底如何完美 ...
- 基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
<!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta htt ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 使用Java高速实现进度条
基于有人问到如何做进度条,以下给个简单的做法: 主要是使用JProgressBar(Swing内置javax.swing.JProgressBar)和SwingWorker(Swing内置javax. ...
- Android 打造形形色色的进度条 实现可以如此简单
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重 ...
- Android_自定义进度条
转载:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重复造轮子的 ...
- 使用Java快速实现进度条（转）
基于有人问到怎样做进度条,下面给个简单的做法: 主要是使用JProgressBar(Swing内置javax.swing.JProgressBar)和SwingWorker(Swing内置javax. ...
- 一个简单、易用的Python命令行(terminal)进度条库
eprogress 是一个简单.易用的基于Python3的命令行(terminal)进度条库,可以自由选择使用单行显示.多行显示进度条或转圈加载方式,也可以混合使用. 示例 单行进度条 多行进度条 圆 ...
随机推荐
- netem设置了网卡的流量控制，为啥发包的延迟就搞不定呢？
为啥我用netem做了一个流量的控制 但是发送的时候,感觉真正发送数据的时候还是没有达到每一个数据包都是1s的延迟呀,这里的1s的延迟是啥意思啊? 这里的delay并不是说每个数据包都delay 5s ...
- dpr dproj 扩展名区别，dprdproj
这段时间用xe6,看了下目录下生成的一些文件,因为隐藏了扩展名,看到两个名字一样的文件,右键属性看了下,同名但扩展名不同,百度了下区别,没有找到答案,问群里的朋友才知道区别,特此记录下来: dpr:D ...
- delphi 更改DBGrid 颜色技巧
1.根据条件更改某一单元格的颜色 procedure TMainFrm.First_DGDrawColumnCell(Sender: TObject; const Rect: TRect; DataC ...
- 【bzoj4300】绝世好题 dp
题目描述 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 输入 输入文件共2行. 第一行包括一个整数n. 第二行包括n个 ...
- CentOS 服务ftp（vsftpd）
1.检查是否已经安装vsftpd yum list installed | grep vsftpd 2.安装vsftpd yum install -y vsftpd 3.检查vsftpd system ...
- [HDU4532]湫秋系列故事——安排座位
题面在这里 description 有\(n\)种颜色的小球,每种颜色的小球有\(a_i\)个: 要把它们摆成一排,求相邻小球颜色不相同的摆放方案数. 任意两个合理的安排方法,只要有一个位置的同学不同 ...
- [洛谷P3878][TJOI2010]分金币
题目大意:把$n(n\leqslant30)$个数分成两组,两组个数最多相差$1$,求出两组元素差的绝对值最小使多少 题解:模拟退火 卡点:$\exp$中的两个数相减写反,导致$\exp(x)$中的$ ...
- 第13届 广东工业大学ACM程序设计大赛 C题 平分游戏
第13届 广东工业大学ACM程序设计大赛 C题 平分游戏 题目描述 转眼间又过了一年,又有一届的师兄师姐要毕业了. 有些师兄师姐就去了景驰科技实习. 在景驰,员工是他们最宝贵的财富.只有把每一个人 ...
- 2017-7-18-每日博客-关于Linux下的history的常用命令.doc
History history命令可以用来显示曾执行过的命令.执行过的命令默认存储在HOME目录中的.bash_history文件中,可以通过查看该文件来获取执行命令的历史记录.需要注意的是.bash ...
- 总结：Bias(偏差)，Error(误差)，Variance(方差)及CV(交叉验证)
犀利的开头 在机器学习中,我们用训练数据集去训练(学习)一个model(模型),通常的做法是定义一个Loss function(误差函数),通过将这个Loss(或者叫error)的最小化过程,来提高模 ...