圆环百分比

最新推荐文章于 2022-10-27 14:34:03 发布
最新推荐文章于 2022-10-27 14:34:03 发布
阅读量155 收藏
点赞数
文章标签： canvas webgl css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyf_568/article/details/117801280
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS+CSS3 3D立体环形百分比进度条图表动画特效</title>
</head>
<body>
<center><br><br><br><br><br>
<canvas id="pie1" width="200px" height="200px"></canvas>
<canvas id="pie2"></canvas>
</center>
<script src="js/Charts.js"></script>
<script type="text/javascript">
    new Chart("pie1").ratePie(98);
    var pie=new Chart("pie2");
        pie.ratePie(30);
</script>
</body>
</html>
Charts.js
/**
 * [html: <canvas id="pie1"></canvas>]
 * [js: new Chart("pie1").ratePie(60);]
 * author:zhengyong
 * create:2016-05-11
 */
  window.Chart=function(domId){
    var canvas = document.getElementById(domId);
    var ctx = canvas.getContext("2d");
    var W = canvas.width;
    var H = canvas.height;
    var deg=0,new_deg=0,dif=0;
    var text,text_w;
    var R=W<H?W:H;//先默认环半径为canvas宽度
    var bgR=(R-R/3)/2;//内环背景半径
    var linkW=R/2-bgR;//环宽度=(W/2-内半径)
    var inW=linkW/3;//内环宽度=环宽度*1/3
    var outW=linkW*2/3;//外环宽度=环宽度*2/3
    var inR=bgR+inW/2;//内环半径=内半径+内环宽度/2
    var outR=bgR+inW+outW/2;//外环半径=内半径+内环宽度+外环宽度/2
    var $this=this;
    $this.ratePieNoAnimation=function(number){
        deg=360*number/100;
          //底色大
        ctx.clearRect(0,0,W,H);
        ctx.beginPath();
        var grd = ctx.createLinearGradient(0,H, W, 0);//颜色渐变的起始坐标和终点坐标
            grd.addColorStop(0, "#74DE1C");
            grd.addColorStop(0.3, "#9DDE12");
            grd.addColorStop(0.6, "#B2ED2E");
            grd.addColorStop(1, "#CBF76C");
            ctx.strokeStyle = grd;//生成的颜色块赋值给样式
        ctx.lineWidth=outW;
        ctx.arc(W/2,H/2,outR,0,Math.PI*2,false);
        ctx.stroke();
        //底色小
        ctx.beginPath();
        var grd = ctx.createLinearGradient(W, 0, 0,H);
           grd.addColorStop(0, "#74DE1C");
            grd.addColorStop(0.3, "#9DDE12");
            grd.addColorStop(0.6, "#B2ED2E");
            grd.addColorStop(1, "#CBF76C");
            ctx.strokeStyle = grd;
        ctx.lineWidth=inW;
        ctx.arc(W/2,H/2,inR,0,Math.PI*2,false);
        ctx.stroke();
        //圆心背景
        ctx.beginPath();
        ctx.fillStyle="#D9E5E5";
        ctx.arc(W/2,H/2,bgR,0,Math.PI*2,false);
        ctx.fill();
        //外层
        var r = deg*Math.PI/180;
        ctx.beginPath();
        var grd = ctx.createLinearGradient(0,H, W, 0);
            grd.addColorStop(0, "#8BEAF5");
            grd.addColorStop(0.3, "#22A4D4");
            grd.addColorStop(0.6, "#0B72BD");
            grd.addColorStop(1, "#0A5DA0");
            ctx.strokeStyle = grd;
        ctx.lineWidth=outW;
        ctx.arc(W/2,H/2,outR,0-90*Math.PI/180,r-90*Math.PI/180,false);
        ctx.stroke();
        //内层
        ctx.beginPath();
        var grd = ctx.createLinearGradient(W, 0, 0,H);
            grd.addColorStop(0, "#8BEAF5");
            grd.addColorStop(0.3, "#22A4D4");
            grd.addColorStop(0.6, "#0B72BD");
            grd.addColorStop(1, "#0A5DA0");
            ctx.strokeStyle = grd;
        ctx.lineWidth=inW;
        ctx.arc(W/2,H/2,inR,0-90*Math.PI/180,r-90*Math.PI/180,false);
        ctx.stroke();
        ctx.fillStyle="#000";
        ctx.font="bold "+R/4+"px Arial";
        text = Math.floor(deg/360*100)+"%";
        text_w = ctx.measureText(text).width;
        ctx.fillText(text,W/2 - text_w/2,H/2+R/10);
    };
    $this.ratePie=function(number){
          var i=0;
          var t= setInterval(function(){
            if(i==number){
                clearInterval(t);
            }else{
                number>0?i++:i--;
            }
            $this.ratePieNoAnimation(i);
            if(i > 100 || i < -100){//如果数字太大，取消动画效果
                $this.ratePieNoAnimation(number);
                clearInterval(t);
            }
          }, 2000/(number>0?number:-number));
    }
  }
hello芳芳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
圆环百分比分布图
jhxlx的博客
11-14 3326
有时候我们会遇到做百分比分布图的功能，这样的功能说难不难，说容易也不容易，主要是对绘制api和动画掌握的较为熟悉就行，下面就试试做下这个功能首先看个效果图:一、分析实现这个效果要做哪些事：1.画一个底部灰色圆 2.画绿色圆弧 3.画红褐色圆弧动态圆弧的实现可以通过动画来实现，首先是绿色圆弧，只需要动态增加圆弧所需要经过的弧度即可，红褐色圆弧则就需要将起点设置在绿圆弧的结束位置，结束点在绿圆弧的起
圆环百分比三种实现方式汇总
weixin_33711641的博客
05-30 1720
前言 如下图所示,圆环百分比的效果在平常业务中还是有时候需要用到的(比如抢优惠券),借此总结一个几种实现圆环百分比的做法 实现方式 1. canvas实现 html部分代码 <canvas id="circle" height="132px" width="132px"> </canvas> 复制代码 js部分代码 // 1.canvas实现 circle(...
HTML5 canvas圆形百分比进度条动画特效代码
03-20
HTML5 canvas圆形百分比进度条动画代码，圆形、半圆形、半环形进度条，百分比动态显示。
用Canvas画圆环百分比进度条
YUSIR 完美CODING世界
07-17 6136
canvas圆环进度 *{padding: 0; margin: 0; } .circle{width: 200px;height: 200px;margin: 20em auto;position: relative;} canvas{display: block;margin: 0;position: absolute;background: white;left: 0;t
canvas画圆环%显示
alni1827的博客
11-09 129
我: JS代码： function circleProgress(id,value,average){ var canvas = document.getElementById(id); var context = canvas.getContext(‘2d’); var _this = $(canvas), value= Number(44),// 当前百分比...
画圆环,Canvas百分比环状图
jyf_568的博客
06-10 316
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Canvasprogress</title> </head> <body> <canvasid="process"wid...
简单的实现环形比例图
Cja_18241264310的博客
07-20 2398
//初始化 ProportionLoopView *loopView = [[ProportionLoopView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];     loopView.backgroundColor = [UIColor clearColor];     loopView.center = self
Excel饼图圆环图模板-超细圆环百分比图表_一个百分比的圆环图怎么制作
11-24
本文将深入探讨“Excel饼图圆环图模板-超细圆环百分比图表”的制作方法，以及如何创建一个百分比的圆环图。 首先，饼图和圆环图的区别在于，圆环图比传统的饼图更加紧凑，中心空出一部分，视觉效果更精致。在“超细...
超细圆环百分比图表.zip
12-15
超细圆环百分比图表是一种数据可视化工具，常用于展示数据的比例分布或比较不同部分在整个整体中的占比。这种图表在IT行业中尤其适用于数据分析、报告制作和业务演示，因为它们能够简洁明了地传达复杂的数据信息。 ...
简约圆环百分比说明PPT模板.rar
09-03
【简约圆环百分比说明PPT模板】是一种用于数据展示和信息传递的高效工具，尤其在商业报告、项目汇报、数据分析等领域中应用广泛。这款模板以其简洁的设计风格和直观的圆环百分比图表吸引人，使得复杂的数据可以...
html5 canvas进度条圆环图表统计动画特效
06-11
html5 canvas制作的进度条圆环图表统计动画特效，一款非常简单的半圆环百分比进度条动画效果。
ios-圆环百分比动画 CAShapeLayer.zip
07-11
在iOS开发中，创建动态效果是一项常见的任务，而圆环百分比动画则是一种吸引用户注意力并展示数据的有效方式。这个名为“ios-圆环百分比动画 CAShapeLayer.zip”的资源包，显然包含了如何使用Apple的Core Animation...
前端(React)实现圆环百分比
qq_45163099的博客
10-27 798
前端(React)实现圆环百分比
H5动画，canvas绘制圆环百分比进度的动态效果
热门推荐
tangdou5682的博客
10-10 1万+
H5动画， canvas绘制圆环百分比进度的动态效果 h5+javascript简单动画
html半圆形效果图,html5 canvas半圆形百分比进度条动画特效
weixin_42310271的博客
06-03 527
特效描述：半圆形百分比 进度条动画 动画特效。canvas进度条 半圆形 动态进度条代码结构1. 引入CSS2. 引入JS3. HTML代码您的浏览器不支持canvas标签，建议使用chrome,firefox,ie10+您的浏览器不支持canvas标签，建议使用chrome,firefox,ie10+您的浏览器不支持canvas标签，建议使用chrome,firefox,ie10+//圆环进度条...
canvas绘制简易百分比圆饼效果
小记心得
06-27 3498
在仪表盘的任务增多同时，列表页的百分比圆环或圆饼也随之增多，于是顺手在仪表盘的基础上，封装了一个小小的jquery插件（jq-canvaspercent.js），暂且版本1.0吧，到以后业务的变化在对其进行功能拓展； 暂时性用于页面中有多处百分比圆环的效果处理，还是不错的。 jq-canvaspercent.js代码比较简单，以下直接给出插件代码和几张截图： /* * canvas
一个圆环内外径计算的算法
Ivan 的专栏
03-19 1万+
一个圆环内外径计算的算法 最近在做一个项目，需要计算图片上的圆环的内外直径。类似于下面这样的圆环。 这些圆环的基本特征是 1. 每幅图只会出现一个圆环。当然可能会出现圆环偏离出图像，只能看到不完整的圆环的情况。 2. 圆环内部可能是黑的，也可能是亮的，但是与圆环的颜色有区别。可以比较清晰的看到圆环的内边界。 3. 圆环内外壁或者表面都有可能有破损。比如下图： 在这种情况下要...
圆环形百分比统计
chenlimao123的博客
03-02 1338
此为效果图 参考:http://blog.csdn.NET/u010053224/article/details/51799523 /** * Created by ${ITcat} on 2017/3/1. * * 自定义的圆形饼图控件 */ public class MyPieChartView extends View { private final float de
圆环比例图
weixin_30765577的博客
01-23 533
<template> <canvas class="pie" id="pieRatio"></canvas> </template> <script> export default { data() { return { base...
css3实现圆环百分比进度
最新发布
06-11
可以使用CSS3中的transform和animation属性来实现圆环百分比进度的效果，具体步骤如下： 1. 创建一个圆环的基本样式，设置圆环的宽度、颜色和边框样式： ``` .progress { width: 100px; height: 100px; border:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值