效果图

实现原理:

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绘制的双半圆环进度条的更多相关文章

  1. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  2. 写了一个基于React+Redux的仿Github进度条

    曾经实现过Angular版,这次感觉用了高大上的React却写了更多的代码,需要的配置也更多了,有利有弊吧. 但这个“导航条问题”很有意思,涉及到在Redux中写timer,其实我很困惑,到底如何完美 ...

  3. 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)

    <!DOCTYPE html> <html> <head> <title>html5_2.html</title> <meta htt ...

  4. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  5. 使用Java高速实现进度条

    基于有人问到如何做进度条,以下给个简单的做法: 主要是使用JProgressBar(Swing内置javax.swing.JProgressBar)和SwingWorker(Swing内置javax. ...

  6. Android 打造形形色色的进度条 实现可以如此简单

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重 ...

  7. Android_自定义进度条

    转载:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重复造轮子的 ...

  8. 使用Java快速实现进度条(转)

    基于有人问到怎样做进度条,下面给个简单的做法: 主要是使用JProgressBar(Swing内置javax.swing.JProgressBar)和SwingWorker(Swing内置javax. ...

  9. 一个简单、易用的Python命令行(terminal)进度条库

    eprogress 是一个简单.易用的基于Python3的命令行(terminal)进度条库,可以自由选择使用单行显示.多行显示进度条或转圈加载方式,也可以混合使用. 示例 单行进度条 多行进度条 圆 ...

随机推荐

  1. 【Linux】- Ubuntu 配置mysql远程访问

    ubuntu上安装mysql非常简单只需要几条命令就可以完成. sudo apt-get install mysql-server   安装过程中会提示设置密码什么的,注意设置了不要忘了,安装完成之后 ...

  2. Windows资源监控工具大全

    在利用LoadRunner进行性能测试的时候,Windows服务器的资源是经常需要监控的对象.其实除了LoadRunner提供的计数器,似乎Window服务器并不像Unix或者Linux提供众多的性能 ...

  3. [CLR via C#]引用类型和值类型

    一.引用类型与值类型的区别 CLR支持两种类型:引用类型和值类型.引用类型总是从托管堆上分配的,C#的new操作符会返回对象的内存地址.使用引用类型时,必须注意到一些性能问题. 1)内存必须从托管堆上 ...

  4. c++源文件到可执行文件的过程

    1.预处理(preprocessor):对#pragma.#include.#define.#ifdef/#endif.#ifndef/#endif,inline内联函数等进行处理 2.编译(comp ...

  5. hdu 1162 Eddy's picture (最小生成树)

    Eddy's picture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  6. Events-事件-红绿灯

    Event: 用于线程之间状态的同步.对全局变量不断地做修改. Event=threading.Event()  #生成1个event的对象 Event.wait() #等着设定全局变量.检测标志位是 ...

  7. [NOI.AC省选模拟赛3.31] 附耳而至 [平面图+最小割]

    题面 传送门 思路 其实就是很明显的平面图模型. 不咕咕咕的平面图学习笔记 用最左转线求出对偶图的点,以及原图中每个边两侧的点是谁 建立网络流图: 源点连接至每一个对偶图点,权值为这个区域的光明能量 ...

  8. Android APP性能优化(最新总结)

    导语   安卓大军浩浩荡荡,发展已近十个年头,技术优化日异月新,如今Android 8.0 Oreo 都发布了,Android系统性能已经非常流畅了.但是,到了各大厂商手里,改源码自定系统,使得And ...

  9. BZOJ1997:[HNOI2010]PLANAR——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=1997 https://www.luogu.org/problemnew/show/P3209 若能 ...

  10. 解决jsp两种提交方式乱码 的方法

    解决中文乱码 ---post提交方式  需要在处理页面添加request.setCharacterEncoding("utf-8"); 制定请求的编码,调用一下request.ge ...