由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图

drawMain(drawing_elem, percent, forecolor, bgcolor) {
/*
@drawing_elem: 绘制对象
@percent:绘制圆环百分比, 范围[0, 100]
@forecolor: 绘制圆环的前景色,颜色代码
@bgcolor: 绘制圆环的背景色,颜色代码
*/
var context = drawing_elem.getContext("2d");
var center_x = drawing_elem.width / 2;
var center_y = drawing_elem.height / 2;
var rad = Math.PI*2/100;
var speed = 0;

// 绘制背景圆圈
function backgroundCircle(){
context.save();
context.beginPath();
context.lineWidth = 8; //设置线宽
var radius = center_x - context.lineWidth;
context.lineCap = "round";
context.strokeStyle = bgcolor;
context.arc(center_x, center_y, radius, 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
}

//绘制运动圆环
function foregroundCircle(n){
context.save();
context.strokeStyle = forecolor;
context.lineWidth = 8;
context.lineCap = "round";
var radius = center_x - context.lineWidth;
context.beginPath();
context.arc(center_x, center_y, radius , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
context.stroke();
context.closePath();
context.restore();
}

//绘制文字
function text(n){
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.fillStyle = forecolor;
var font_size = 40;
context.font = font_size + "px Helvetica";
var text_width = context.measureText(n.toFixed(0)+"%").width;
context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);
context.restore();
}

//执行动画
(function drawFrame(){
window.requestAnimationFrame(drawFrame);
context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
backgroundCircle();
text(speed);
foregroundCircle(speed);
if(speed >= percent) return;
speed += 1;
}());
},

调用的话

var time_canvas = document.getElementById("time-graph-canvas");
this.drawMain(time_canvas, 70, "#85d824", "#eef7e4");

var weather_canvas = document.getElementById("weather-graph-canvas");
this.drawMain(weather_canvas, 90, "#2ba0fb", "#e5f1fa");

html文件
<div class="time-graph">
<canvas id="time-graph-canvas" width="160" height="160"></canvas>
</div>

css文件
.time-graph {
padding-top: 20px;
display:flex;
display:-webkit-flex;
justify-content: center;
align-items: center;
}

#time-graph-canvas {
width: 80px;
height: 80px;
}

有些绘制细节需要注意,为了保证绘制的清晰度,canvas的大小需要设置为canvas父元素大小的2倍。

其他的代码都有详细的注释,自己拷一下,运行一下就知道
————————————————

转自:本文为CSDN博主「前端小白的江湖路」的原创文章https://blog.csdn.net/qq_21058391/article/details/76691047

canvas 绘制动态圆环进度条的更多相关文章

  1. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  2. Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

  3. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  4. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  5. Handler实现线程之间的通信-下载文件动态更新进度条

    1. 原理 每一个线程对应一个消息队列MessageQueue,实现线程之间的通信,可通过Handler对象将数据装进Message中,再将消息加入消息队列,而后线程会依次处理消息队列中的消息. 2. ...

  6. AsyncTask用法解析-下载文件动态更新进度条

    1. 泛型 AysncTask<Params, Progress, Result> Params:启动任务时传入的参数,通过调用asyncTask.execute(param)方法传入. ...

  7. svg实现圆环进度条

    开源实现:https://github.com/lugolabs/circles 自行实现:圆环与svg画布间剩的空间太多. <!DOCTYPE html> <html> &l ...

  8. css3 制作圆环进度条

    引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...

  9. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

随机推荐

  1. Linux_CentOS软件安装调试 源代码包编译安装和 二进制包配置

    Linux 下源代码(C 语言)如何编译(安装) 1. 先安装源代码编译的软件 gcc,make,openssl 如下: yum install -y gcc make gcc-c++ openssl ...

  2. Python之BeautifulSoup的使用示例

    import requests from bs4 import BeautifulSoup url = 'http://pm25.in/'+city_pinyin r = requests.get(u ...

  3. ES6深入浅出-6 ES 6 模块-1.模块化速学

    把模块先默认认为是豆腐块 为什么前端需要模块? 没有模块的方式 预览这个html页面     一共200行js代码 前100行在做一件事 ,另外100行在做另一件事,这样就是两个模块 main.js来 ...

  4. Eclipse注释模版

    打开Window->Preferences->Java->Code Style->Code Templates 点击"Import",导入模板codetem ...

  5. 报错:Sqoop2 Error message: Class not found JDBC Driver Class: com.mysql.jdbc.Driver

    报错背景: CDH安装完成Sqoop2的组建后进行创建link的操作. 报错现象: There are issues with entered data, please revise your inp ...

  6. C# Web Service 不使用服务引用直接调用方法(转)

    版权声明:本文为博主原创文章,未经博主允许不得转载.          https://blog.csdn.net/u011508145/article/details/79496214 using ...

  7. C语言中结构体的构造函数

    示例代码: #include <iostream> using namespace std; struct Node { int x, y, z; Node(int _x, int _y, ...

  8. AWS 数据分析服务(十)

    Amazon Kinesis 概念 处理AWS上大量流数据的数据平台 Kinesis Streams 用于搜集数据,Client Library 用于分析后的展示 构建用于处理或分析流数据的自定义应用 ...

  9. centos umount 卸载出错

    target is busy. (In some cases useful info about processes that use the device ) or fuser()) 解决 fuse ...

  10. addEventListener兼容性问题

    参考链接:https://blog.csdn.net/lililiaaa/article/details/83960924