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)进度条库,可以自由选择使用单行显示.多行显示进度条或转圈加载方式,也可以混合使用. 示例 单行进度条 多行进度条 圆 ...
随机推荐
- Ubuntu 12.04.1 LTS 升级 PHP 从5.3 到 5.5
#!/bin/bash # desc install php5.5 #add-apt-repository ppa:ondrej/php5 #apt-get install python-softwa ...
- MHDD工具使用简写
检查硬盘,建议接主板一口,DOS工具箱输入mhdd回车进入界面 输入硬盘接口号(这里不固定) 按F4是进行硬盘扫描,按两次就开始,按方向键进行快进 Mhdd界面输入 erase命令:擦除指定扇区范围内 ...
- matlab中的静态变量
persistent X Y Z 将X,Y,Z定义为在其声明处的函数的局部变量.然而,这些变量的值在函数调用期间在内存中保存(应该是堆区).Persistent 变量和global(全局)变量相似,因 ...
- Codeforces ZeptoLab Code Rush 2015 D.Om Nom and Necklace(kmp)
题目描述: 有一天,欧姆诺姆发现了一串长度为n的宝石串,上面有五颜六色的宝石.他决定摘取前面若干个宝石来做成一个漂亮的项链. 他对漂亮的项链是这样定义的,现在有一条项链S,当S=A+B+A+B+A+. ...
- 洛谷 P2898 [USACO08JAN]haybale猜测Haybale Guessing 解题报告
[USACO08JAN]haybale猜测Haybale Guessing 题目描述 给一段长度为\(n\),每个位置上的数都不同的序列\(a[1\dots n]\)和\(q\)和问答,每个问答是\( ...
- bzoj1042: [HAOI2008]硬币购物（DP+容斥）
1600+人过的题排#32还不错嘿嘿 浴谷夏令营讲过的题,居然1A了 预处理出f[i]表示购买价值为i的东西的方案数 然后每次询问进行一次容斥,答案为总方案数-第一种硬币超限方案-第二种超限方案-第三 ...
- 51nod 1257 背包问题 V3（分数规划）
显然是分数规划...主要是不会求分数的形式,看了题解发现自己好傻逼QAQ 还是二分L值算出d[]降序选K个,顺便记录选择时候的p之和与w之和就可以输出分数形式了... #include<iost ...
- input file上传图片预览，非插件
Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...
- [codeforces/gym/101350/L]维护“凸包”
题目链接:http://codeforces.com/gym/101350/problems 给定n个墙,每个墙有一个高度,要支持动态修改墙的高度和查询这个“容器”能盛多少水. (队友)观察发现,能盛 ...
- C#中static void Main(string[] args)的含义
static:是将main方法声明为静态的. void:说明main方法不会返回任何内容. String[]args:这是用来接收命令行传入的参数,String[]是声明args是可以存储字符串数组. ...