canvas画圆环%显示
我:
JS代码:
function circleProgress(id,value,average){
var canvas = document.getElementById(id);
var context = canvas.getContext(‘2d’);
var _this = $(canvas),
value= Number(44),// 当前百分比,数值
average = Number(33),// 平均百分比
color = “”,// 进度条、文字样式
maxpercent = 100,//最大百分比,可设置
c_width = _this.width(),// canvas,宽度
c_height =_this.height();// canvas,高度
// 判断设置当前显示颜色
if( value== maxpercent ){
color=”#29c9ad”;
}else if( value> average ){
color=”#27b5ff”;
}else{
color=”#ff6100”;
}
// 清空画布
context.clearRect(0, 0, c_width, c_height);
// 画初始圆
context.beginPath();
// 将起始点移到canvas中心
context.moveTo(c_width/2, c_height/2);
// 绘制一个中心点为(c_width/2, c_height/2),半径为c_height/2,起始点0,终止点为Math.PI * 2的 整圆
context.arc(c_width/2, c_height/2, c_height/2, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = ‘#ddd’; //填充颜色
context.fill();
// 绘制内圆
context.beginPath();
context.strokeStyle = color;
context.lineCap = ‘square’;
context.closePath();
context.fill();
context.lineWidth = 10.0;//绘制内圆的线宽度
function draw(cur){
// 画内部空白
context.beginPath();
context.moveTo(24, 24);
context.arc(c_width/2, c_height/2, c_height/2-10, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255,255,255,1)'; // 填充内部颜色
context.fill();
// 画内圆
context.beginPath();
// 绘制一个中心点为(c_width/2, c_height/2),半径为c_height/2-5不与外圆重叠,
// 起始点-(Math.PI/2),终止点为((Math.PI*2)*cur)-Math.PI/2的 整圆cur为每一次绘制的距离
context.arc(c_width/2, c_height/2, c_height/2-5, -(Math.PI / 2), ((Math.PI * 2) * cur ) - Math.PI / 2, false);
context.stroke();
//在中间写字
context.font = "bold 18pt Arial"; // 字体大小,样式
context.fillStyle = color; // 颜色
context.textAlign = 'center'; // 位置
context.textBaseline = 'middle';
context.moveTo(c_width/2, c_height/2); // 文字填充位置
context.fillText(value+"%", c_width/2, c_height/2-20);
context.fillText("正确率", c_width/2, c_height/2+20);
}
我:
// 调用定时器实现动态效果
var timer=null,n=0;
function loadCanvas(nowT){
timer = setInterval(function(){
if(n>nowT){
clearInterval(timer);
}else{
draw(n);
n += 0.01;
}
},15);
}
loadCanvas(value/100);
timer=null;
};
最后需用调用circleProgress这个方法,并把相应的参数穿进去。
canvas画圆环%显示的更多相关文章
- CSS3进度条 和 HTML5 Canvas画圆环
看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...
- canvas画圆环
<!DOCTYPE html><html> <head> <title> </title> <meta http-equiv=&quo ...
- 撩妹技能 get,教你用 canvas 画一场流星雨
开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...
- 第165天:canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...
- 10分钟,利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- Android利用canvas画各种图形
Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
随机推荐
- “零基础”如何快速掌握web前端核心技术?
前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联 ...
- Cocos2d-x 学习笔记(16) 触摸事件与分发 EventTouch dispatchTouchEvent EventListenerTouch
1. EventTouch 触摸事件的成员变量:枚举EventCode.存储Touch的容器. 不同的EventCode代表不同时机的触摸事件,能让监听器调用不同的回调函数. enum class E ...
- 不安分的管家——Jenkins
占个位,持续补充. 一.使用Jenkins进行自动化部署 一直以来关于xx框架/中间件的技术博客有个奇怪的事情.这类文章特点大而全,重复率高,读者阅读完毕基本从安装到放弃. 作为一个使用者,我只是为了 ...
- 四jmeter脚本开发
4.1工作区介绍 4.2http协议录制 a.使用badboy进行录制(目前公司测试系统使用badboy界面不友好,暂时不用,之后再补充) b.jmeter代理服务器进行录制 (1)浏览器代理配置(以 ...
- find命令面试题
注意 (1)建议先创建快照 (2)有可能存在命令正确,但是查找不到文件的情况,是因为不存在相关条件的文件 (3)如果存在命令正确,但是查找不到文件的情况,则先创建相关的文件.目录.用户.组,设置好对应 ...
- git 拉取指定的远程分支(三种方式)
直接拉取 git clone -b ants git@github.com:Ants-double/CareerJava.git git clone -b 远程分支名 仓库地址 本地已经有相关的仓库代 ...
- 搭建ASP.NET Core WebApi项目
步骤 从“文件”菜单中选择“新建”>“项目” . 选择“ASP.NET Core Web 应用程序”模板,再单击“下一步” . 将项目命名为 NetCoreWebApi,然后单击“创建” . 选 ...
- OptimalSolution(4)--字符串问题(2)进阶
一.将整数字符串转成整数值 二.判断字符数组中是否所有的字符都只出现过一次 三.在有序但含有空的数组中查找字符串 四.数组中两个字符串的最小距离 五.添加最少字符使字符串整体都是回文字符串 六.括号字 ...
- 游图邦YOTUBANG是如何搭建生态系统的?
现在的我们最关心的一个问题就是任何一个行业,如果没有办法很好的落地,就算描绘的非常美好,那也只是空中楼阁.昙花一现而已,它无法实现长久的一个发展.互联网时代呢,就是一个流量为王的一个时代,谁拥有庞大的 ...
- django-模板之for empty(十一)
当值为空时,会调用empty下面的值