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)进度条库,可以自由选择使用单行显示.多行显示进度条或转圈加载方式,也可以混合使用. 示例 单行进度条 多行进度条 圆 ...
随机推荐
- 3ds Max学习日记（七）
第7章讲的是多边形建模,实例略多,有十六个,再加上周日的怠惰感,只做了几个实例. 附上今日的劳动成果: 布料(创建一个平面,转换为可编辑多边形,然后调整顶点,连接一些边,添加网格平滑,转换为可 ...
- 软工网络15团队作业4——Alpha阶段敏捷冲刺-4
一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 完成程序副界面的设计与信息的输入统计 明天计划完成的工作: 日期等细致信息的处理 工作中遇到的困难: 对微信小程序开发的代码构成有了一些了解 ...
- Android 如何判断CPU是32位还是64位
转自:http://blog.csdn.net/wangbaochu/article/details/47723265 1. 读取Android 的system property ("ro. ...
- Filezilla 绿色版 禁止升级 能用。
FileZilla还是挺好用的,但是如果钟情于 绿色版的话,肯定首选是 免安装绿色版.但是呢,能找到的所谓的免升级 绿色版,都不能用.只要是打开软件了,就会在你还没有设置更新之前,就已经升级号了.并且 ...
- MD5加密的使用
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 关于已部署的WCF服务升级的问题
在日常的开发过程中,我们会经常迭代发布不同的版本,所以WCF服务的接口也会经常处于变动的状态,比如在传递实体类中新加一个字段.修改参数名称等等关于服务升级的问题.但是我们不可能让已发布的版本重新引用新 ...
- Ehcache概念篇
前言 缓存用于提供性能和减轻数据库负荷,本文在缓存概念的基础上对Ehcache进行叙述,经实践发现3.x版本高可用性不好实现,所以我采用2.x版本. Ehcache是开源.基于缓存标准.基于java的 ...
- TCP协议的滑动窗口具体是怎样控制流量的
首先明确: 1)TCP滑动窗口分为接受窗口,发送窗口滑动窗口协议是传输层进行流控的一种措施,接收方通过通告发送方自己的窗口大小,从而控制发送方的发送速度,从而达到防止发送方发送速度过快而导致自己被淹没 ...
- Bootstrap排版类
类 描述 实例 .lead 使段落突出显示 尝试一下 .small 设定小文本 (设置为父文本的 85% 大小) 尝试一下 .text-left 设定文本左对齐 尝试一下 .text-center 设 ...
- bzoj1069-最大土地面积
题目 给定\(n\ (n\le 2000)\)个坐标,求四个坐标使得围起来的四边形面积最大. 分析 最暴力的想法是枚举四个点,然而肯定超时.接着不知道怎么想到中途相遇,然而一点关系都没有.这里用到了一 ...