java如何画百分比圆环_canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度;完成某个事情,也可以设置一个完成的进度。
这里用canvas绘制一个简单百分比圆环进度条。
看下效果:
1. 动画方式
2. 静默方式
贴上代码,仅供参考
/**
* LBS drawRing
* Date: 2015-04-24
* ==================================
* opts.parent 插入到哪里 一个JS元素对象
* opts.width 宽度 = 2* (半径+弧宽)
* opts.radius 半径
* opts.arc 弧宽
* opts.perent 百分比
* opts.color 弧渲染颜色 [底色,进度色]
* opts.textColor 文字渲染颜色
* opts.textSize 文字渲染大小
* opts.animated 是否以动画的方式绘制 默认false
* opts.after 绘制完成时执行函数
* ==================================
**/
functiondrawRing(opts) {var _opts ={
parent: document.body,
width:100,
radius:45,
arc:5,
perent:100,
color: ['#ccc', '#042b61'],
textColor:'#000',
textSize:'14px',
animated:false,
after:function() {}
}, k;for (k in opts) _opts[k] =opts[k];var parent =_opts.parent,
width=_opts.width,
radius=_opts.radius,
arc=_opts.arc,
perent=parseFloat(_opts.perent),
color=_opts.color,
textSize=_opts.textSize,
textColor=_opts.textColor,
c= document.createElement('canvas'),
ctx= null,
x= 0,
animated=_opts.animated,
after=_opts.after;
parent.appendChild(c);
ctx= c.getContext("2d");
ctx.canvas.width=width;
ctx.canvas.height=width;functionclearFill() {
ctx.clearRect(0, 0, width, width);
}functionfillBG() {
ctx.beginPath();
ctx.lineWidth=arc;
ctx.strokeStyle= color[0];
ctx.arc(width/ 2, width / 2, radius, 0, 2 *Math.PI);
ctx.stroke();
}functionfillArc(x) {
ctx.beginPath();
ctx.lineWidth=arc;
ctx.strokeStyle= color[1];
ctx.arc(width/ 2, width / 2, radius, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
ctx.stroke();
}functionfillText(x) {
ctx.font= textSize + ' Arial';
ctx.fillStyle=textColor;
ctx.textBaseline= "middle";
ctx.textAlign= 'center';
ctx.fillText(x.toFixed(1) + '%', width / 2, width / 2);
}functionfill(x) {
fillBG();
fillArc(x);
fillText(x);
}if (!animated) returnfill(perent);
fill(x);!functionanimate() {if (++x > perent) return after &&after();
setTimeout(animate,10);
clearFill();
fill(x);
}();
}
View Code
很简单的一段代码
先创建一个canvas画布对象,设置宽高。
var c = document.createElement('canvas');
document.body.appendChild(c);var ctx = c.getContext("2d");
ctx.canvas.width=width;
ctx.canvas.height= width;
圆环由两部分组成,底部灰色完整的环,根据百分比变动的环。
先绘制底部完整的环。
//起始一条路径
ctx.beginPath();//设置当前线条的宽度
ctx.lineWidth = 10; //10px//设置笔触的颜色
ctx.strokeStyle = '#ccc';//arc() 方法创建弧/曲线(用于创建圆或部分圆)
ctx.arc(100, 100, 90, 0, 2 *Math.PI);//绘制已定义的路径
ctx.stroke();
arc方法默认是从3点钟方向(90度)开始绘制的,一般要把这个开始处设置平常习惯的0点方向。
也需要理解弧度和角度的互相转换。
degrees = radians * 180/Math.PI
角度等于弧度乘于180再除于PI
radians= degrees * Math.PI/180
弧度等于角度度乘于PI再除于180
绘制根据百分比变动的环。
ctx.beginPath();
ctx.lineWidth= 10;
ctx.strokeStyle= '#f30';//设置开始处为0点钟方向(-90 * Math.PI / 180)//x为百分比值(0-100)
ctx.arc(100, 100, 90, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
ctx.stroke();
绘制中间的文字
ctx.font = '40px Arial';
ctx.fillStyle= '#f30';
ctx.textBaseline= 'middle';
ctx.textAlign= 'center';
ctx.fillText('50.0%', 100, 100);
到此一个静止的百分比圆环进度条就绘制完成了。
不满足于绘制静态的,动态的更生动有趣一些。
canvas动态绘制就是在一段时间内:绘制一个区域的内容,清除这个区域内容,再重新绘制内容,重复这个过程(绘制-清除-绘制)。
有兴趣可以去研究一下,上面的代码也可以参考,如果结合动画函数和运动公式可以绘制更生动的百分比圆环进度条哦。
--------------------------------------------
参考:
java如何画百分比圆环_canvas绘制百分比圆环进度条相关推荐
- Java图形化界面编程超详细知识点(7)——进度条
目录 4 JProgressBar.ProgressMonitor.BoundedRangeModel实现进度条 4.1 创建进度条 4 JProgressBar.ProgressMonitor.Bo ...
- java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条
作者:依然 | 时间:2015-05-29 | 阅读:122 canvas绘制旋转的圆环百分比进度条 从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环 我们了解到了怎么使用ca ...
- android自定义进度条百分比跟着走,Android studio圆形进度条 百分数跟随变化
本文实例为大家分享了Android studio圆形进度条展示的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppComp ...
- 在DrawingVisual上绘制圆形的进度条,类似于IOS系统风格。
1.说明:在WPF中,文件下载时需要显示下载进度,由于系统自带的条型进度条比较占用空间,改用圆形的进度条,需要在DrawingVisual上呈现. 运行的效果如图: private Point Get ...
- OpenGL with QtWidgets:练习之绘制2D环形进度条
1.实现思路 这里主要涉及几个点:绘制圆环,绘制文字,动画,抗锯齿. 绘制圆环网上有些人是计算好圆边的顶点后传入的,我这里直接在片段着色器里根据距离圆心的距离来渲染的圆环. void main() { ...
- 用emWin的2D绘图函数画一个带圆形端点的环形进度条
先上效果图,首先是顺时针转: 然后是逆时针转: 大概讲一下思路吧,首先讲一下顺时针是怎么弄的,很简单. 画圆弧函数GUI_DrawArc有起始角度a0和终止角度a1两个参数,且a0必须小于a1否则无法 ...
- android进度条动画圆环虚线,实线和虚线进度条控件 Android CircleProgressBar
软件介绍 CircleProgressBar继承ProgressBar, 是包含实心和线条两种风格的圆环进度条. 此外, 进度值可以随意定制. 如果你对酷炫的进度条比较感兴趣, 或许你更喜欢 Load ...
- java awt文件上传_springMVC实现前台带进度条文件上传的示例代码
项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置 ...
- android 画圆弧动画,『Android自定义View实战』自定义带入场动画的弧形百分比进度条...
写在前面 这是在简书发表的处女座,这个想法也停留在脑海中很久了,一直拖到现在(懒癌发作2333),先自我介绍一番,一枚刚毕业不久的Android程序猿,初出茅庐的Android小生,之前一直在CSDN ...
最新文章
- opencv的ROI操作
- MATLAB利用串口接收数据,并实时显示图形
- 关于Metasploit开发环境的搭建
- JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】
- Centos7 1秒钟 安装 Docker
- 简洁的网页跑丢了动态动画404页面源码
- python 函数编程
- FPGA RAM存储器设计
- php 中 的含义
- mysql 邻接表_图的邻接表存储结构详解
- 语音识别错误太多?高科技巨头们偏偏“不信邪”
- GAD游戏学院系列丛书发布,引爆峰会现场
- Dash for mac(代码文档浏览器)v6.0.8
- python--requests库 安装及简单使用
- tomcat编码配置gbk_tomcat编码乱码问题
- win7下ApmServ启动失败问题
- 阿里云天池Python训练营-打卡Task3
- xp系统显示无打印机服务器,XP共享打印机时提示“工作站服务没有启动”的原因和解决方案...
- 百度搜索框搜索时显示或者隐藏历史搜索记录
- linux生成checksum,SF2281修改Lic授权ID生成新checksum生成器
热门文章
- GDI+图像处理前言
- 【剑指offer】面试题33:二叉搜索树的后序遍历序列
- feign调用接口参数可以为null吗_FeignClient调用POST请求时查询参数被丢失的情况分析与处理...
- python url中传递中文_Python编程:URL网址链接中的中文编码与解码
- mssql与oracle不同点,MySql,Mssql,Oracle的优缺点和异同(欢迎补充) *
- php 两个数组中不同的元素,PHP实现查询两个数组中不同元素的方法
- C++获取指向二维数组的首元素指针
- 《Pycharm操作和配置指南》这些不会,写Python肯定慢嘛
- Boost学习之正则表达式--regex
- html盒子嵌套居中,css在盒子中垂直居中和固定居中