我:
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画圆环%显示的更多相关文章

  1. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  2. canvas画圆环

    <!DOCTYPE html><html> <head> <title> </title> <meta http-equiv=&quo ...

  3. 撩妹技能 get,教你用 canvas 画一场流星雨

    开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...

  4. 第165天:canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  5. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  6. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  7. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  8. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  9. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

随机推荐

  1. JVM垃圾回收算法详解

    前言 在JVM内存模型中会将堆内存划分新生代.老年代两个区域,两块区域的主要区别在于新生代存放存活时间较短的对象,老年代存放存活时间较久的对象,除了存活时间不同外,还有垃圾回收策略的不同,在JVM中中 ...

  2. 算法学习之剑指offer(一)

    题目一: 题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路1:遍历 ...

  3. VPGAME 的 Kubernetes 迁移实践

    作者 | 伍冲斌  VPGAME 运维开发工程师 导读:VPGAME 是集赛事运营.媒体资讯.大数据分析.玩家社群.游戏周边等为一体的综合电竞服务平台.总部位于中国杭州,在上海和美国西雅图分别设立了电 ...

  4. [Luogu2323] [HNOI2006]公路修建问题

    题目描述 输入输出格式 输入格式: 在实际评测时,将只会有m-1行公路 输出格式: 输入输出样例 输入样例#1: 复制 4 2 5 1 2 6 5 1 3 3 1 2 3 9 4 2 4 6 1 输出 ...

  5. ‎Cocos2d-x 学习笔记(15.4) EventDispatcher 事件分发具体逻辑 dispatchEventToListeners函数

    dispatchEvent(Event* event)方法在对事件对应的监听器进行重新排序后,进行事件分发操作.具体操作由dispatchEventToListeners方法执行. 该方法声明: vo ...

  6. Open vSwitch系列之一 Open vSwitch诞生

    Open vSwitch系列之一 Open vSwitch诞生 Open vSwitch系列之二 安装指定版本ovs 2006年,SDN诞生于美国GENI项目资助的斯坦福大学Clean Slate课题 ...

  7. spring boot打印sql语句-mybatis

    spring boot打印sql语句-mybatis 概述 当自己编写的程序出现了BUG等等,找了很久 调试运行了几遍到mapper层也进去调试进了源码,非常麻烦 我就想打印出sql语句,好进行解决B ...

  8. css布局两端固定中间自适应

    第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...

  9. Leetcode(4)寻找两个有序数组的中位数

    Leetcode(4)寻找两个有序数组的中位数 [题目表述]: 给定两个大小为 m 和 n 的有序数组 nums1 和* nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O( ...

  10. 解决SpringBatch/Cloud Task的SafeMode下的报错问题

    问题描述 一般公司都有DBA,DBA极有可能开启了Safe mode,也就是不支持不带索引条件过滤的update操作. 而Spring Batch /Cloud Task就有一张表 JOB_SEQ或者 ...