html5 canvas绘制环形进度条,环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图
在绘制圆环前,我们需要知道canvas arc() 方法。
一:绘制环形进度条
<canvas id="myCanvas1" data-percent="60">
您的浏览器不支持canvas标签。
</canvas>
var pper=0;
var pper_interal;
var dushu=document.getElementById('dushu'); var aaa=drawCanvanPercent('myCanvas1','rem',2,'#93BF55',0.2,'#fff', dushu); function drawCanvanPercent(ele_id,dw,cir_r,cir_color,line_w,fill_color,dushu_ele){
if(dw=="rem"){
cir_r=cir_r*($(".charts").width()/5);
line_w=line_w*(window.screen.width/5);
}
var canvas = document.getElementById(ele_id);
var circle = {
r : cir_r/2, //圆的半径
per : canvas.getAttribute('data-percent'), //百分比分子
color : cir_color, //圆环的颜色
lineWidth : line_w //圆环的宽度
};
canvas.width=canvas.height=circle.r*2;
canvas.style.borderRadius="50%";
if(canvas.getContext){
var ctx2 = canvas.getContext("2d");
ctx2.fillStyle = fill_color;
ctx2.arc(circle.r, circle.r, circle.r-circle.lineWidth/2, 0, Math.PI*2, false);
ctx2.fill();
var ctx = canvas.getContext("2d");
pper_interal= setInterval(function () { //间隔10ms调用一次drawmove
drawMove(ctx,circle,dushu_ele);
}, 10); var ctx3 = canvas.getContext("2d"); //绘制底色为灰色的圆圈
ctx3.beginPath();
ctx3.strokeStyle = "#ddd";
ctx3.lineWidth=circle.lineWidth;
ctx3.arc(circle.r, circle.r, circle.r, Math.PI*0, Math.PI*2, false);
ctx3.stroke();
}
} function drawMove(ctx,circle,dushu_ele){ //根据data-percent的值,实现递进效果
if(pper>=circle.per){
pper=circle.per;
clearTimeout(pper_interal);
}else{
pper++;
}
dushu_ele.innerText=pper+'%';
ctx.beginPath();
ctx.strokeStyle = circle.color;
ctx.lineWidth=circle.lineWidth;
ctx.arc(circle.r, circle.r, circle.r, 0, Math.PI*(pper/100)*360/180, false);
ctx.stroke();
}
二:绘制环形渐变色仪图:
<canvas id="myCanvas1" data-percent="85">
您的浏览器不支持canvas标签。
</canvas>
var pper=0;
var pper_interal;
var dushu=document.getElementById('dushu'); var aaa=drawCanvanPercent('myCanvas1','rem',2,'#93BF55',0.2,'#fff', dushu); function drawCanvanPercent(ele_id,dw,cir_r,cir_color,line_w,fill_color,dushu_ele){
if(dw=="rem"){
cir_r=cir_r*($(".charts").width()/5);
line_w=line_w*(window.screen.width/5);
}
var canvas = document.getElementById(ele_id);
var circle = {
r : cir_r/2.5, //圆的半径
r2 : cir_r/2,
per : canvas.getAttribute('data-percent'), //百分比分子
color : cir_color, //圆的颜色
lineWidth : line_w //圆的颜色
};
canvas.width=canvas.height=circle.r*2;
canvas.style.borderRadius="50%";
if(canvas.getContext){
var ctx2 = canvas.getContext("2d");
ctx2.fillStyle = fill_color;
ctx2.arc(circle.r, circle.r, circle.r-circle.lineWidth/2, Math.PI*0, Math.PI*2, true);
ctx2.fill();
var ctx = canvas.getContext("2d");
pper_interal= setInterval(function () {
drawMove(ctx,circle,dushu_ele);
}, 10); var ctx3 = canvas.getContext("2d");
ctx3.beginPath();
ctx3.strokeStyle = "#ddd";
ctx3.lineWidth=circle.lineWidth;
ctx3.arc(circle.r, circle.r, circle.r, Math.PI*0.15, Math.PI*0.85, true); //以逆时针的方式,从0.15PI的位置画到0.85PI。总角度为234度
ctx3.stroke(); }
} function drawMove(ctx,circle,dushu_ele){
if(pper>=circle.per){
pper=circle.per;
clearTimeout(pper_interal);
}else{
pper++;
}
dushu_ele.innerText=pper+'%';
ctx.beginPath();
var g = ctx.createLinearGradient(0,0,180,0); //创建渐变对象 渐变开始点和渐变结束点
g.addColorStop(0, '#A9D25B'); //添加颜色点
g.addColorStop(1, '#FA5A2D'); //添加颜色点
ctx.strokeStyle = g; //使用渐变对象作为圆环的颜色 ctx.lineWidth=circle.lineWidth;
ctx.arc(circle.r, circle.r, circle.r, Math.PI*0.85, Math.PI*((pper/100)*234/180 + 0.85), false); //这里的仪表盘总度数为234。即(2-0.85)*Math.PI
ctx.stroke();
}
绘制刻度:
function drawTicks(ele,cir_r){
var cir_r=cir_r*($(".charts").width()/5);
var circle = {
r : cir_r/2.5, //圆的半径 ,
};
var _canvas = document.getElementById(ele);
var context0= _canvas.getContext("2d");
for(var i=7;i<34;i++){
//保存当前状态
context0.save();
//刻度粗细
context0.lineWidth=2;
//刻度颜色
context0.strokeStyle="#666"
//设置00点,以画布中心为00
context0.translate(circle.r,circle.r);
//设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180
context0.rotate(i*9*Math.PI/180);
context0.beginPath();
//刻度起始点
context0.moveTo(0,circle.r-15);
//刻度结束点
context0.lineTo(0,circle.r-17);
context0.closePath();
context0.stroke();
//将旋转后的图片返回原画布
context0.restore();
}
//利用半径与半径与x轴夹角绘制单个刻度 }
drawTicks("myCanvas1",2);
html5 canvas绘制环形进度条,环形渐变色仪表图的更多相关文章
- canvas绘制圆形进度条(或显示当前已浏览网页百分比)
使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...
- canvas 绘制圆形进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...
- canvas绘制环形进度条
<!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...
- canvas 绘制环形进度条
结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- canvas环形进度条
<style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...
- 用初中数学知识撸一个canvas环形进度条
周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...
- canvas实现半圆环形进度条
html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...
- Canvas实现环形进度条
Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...
随机推荐
- redhat6 快速部署percona
1.首先得能访问外网 2.yum install http://www.percona.com/downloads/percona-release/redhat/0.1-4/percona-relea ...
- Yii2中使用Soap WebSerivce
Soap是一种轻量的.简单的.基于XML(标准通用标记语言下的一个子集)的协议 WebService顾名思义就是web服务,web服务主要有两种,一种是基于soap类型的服务,一种是基于rest类型的 ...
- hive常见的几种优化手段
Hive调优的几个入手点: Hive是基于Hadoop框架的,Hadoop框架又是运行在JVM中的,而JVM最终是要运行在操作系统之上的,所以,Hive的调优可以通过如下几个方面入手: 操作系统调优 ...
- 采用文件方式安装Python第三方库
由于Python某些第三方库仅提供源代码,通过pip下载文件后无法在Windows系统编译安装,会导致第三方库安装失败.为了解决这类第三方库的安装问题,美国加州大学尔湾分校提供了一个网页,帮助Pyth ...
- (mark)ubuntu16.04下安装&配置anaconda+tensorflow新手教程
https://blog.csdn.net/m0_37864814/article/details/82112029
- Tensorflow取消占用全部GPU
参考:https://www.cnblogs.com/jiu0821/p/9501665.html Tensorflow默认是会占用全部的GPU,而有时候你根本不需要那么占用那么多GPU资源,这时候就 ...
- jquery table 发送两次请求 解惑
版本1.10 以下链接为一个较低版本解决方案: http://blog.csdn.net/anmo/article/details/17083125 而我的情况有点作, 情况描述: 1,一个页面两个t ...
- Java设计模式(12)——结构型模式之门面模式(Facade)
一.概述 概念 简要示意图(没有一个统一的UML图) 角色 门面角色:门面模式核心,它被客户端调用,并且熟悉子系统 子系统角色:子系统,子系统并不知道门面的存在,门面对它来说只不过是另外一个客户端 ...
- c++动态库封装及调用(1、动态库介绍)
1.一个程序从源文件编译生成可执行文件的步骤: 预编译 --> 编译 --> 汇编 --> 链接 (1)预编译,即预处理,主要处理在源代码文件中以“#”开始的预编译指令,如宏展开 ...
- [ES]Elasticsearch在windows下的安装
1.环境 win7 64位 2.下载包环境 https://www.elastic.co/cn/downloads/elasticsearch 选择对应安装包 3.安装过程 解压安装包,例如我的,解压 ...