canvas_基于canvan绘制的双半圆环进度条

最新推荐文章于 2022-10-09 14:55:58 发布
最新推荐文章于 2022-10-09 14:55:58 发布
阅读量623 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wush-1215/p/9355676.html
版权

效果图

实现原理：

1.使用canvas绘制两个半圆弧，底图灰色半圆弧和颜色进度圆弧。

2.利用setInterval计时器，逐步改变颜色进度条，达到进度条的效果。

 

效果代码：

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7     </head>
  8 
  9     <body>
 10         <canvas id="canvas" width="300" height="300">
 11  </canvas>
 12 
 13         <script type="text/javascript">
 14             function toCanvas(id, progress, progress2) {
 15                 //canvas进度条
 16                 var canvas = document.getElementById(id),
 17                     ctx = canvas.getContext("2d"),
 18                     percent = progress,
 19                     percent2 = progress2,
 20                     //最终百分比
 21                     circleX = canvas.width / 2, // 中心x坐标
 22                     circleY = canvas.height / 2, //中心y坐标
 23                     radius = 100, //圆环半径
 24                     lineWidth = 8, // 圆形线条的宽度
 25                     fontSize = 10; //字体大小
 26 
 27                 /*//两端圆点
 28                 function smallcircle1(cx, cy, r) {
 29                     ctx.beginPath();
 30                     ctx.lineWidth = 1;
 31                     ctx.fillStyle = '#06a8f3';
 32                     ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
 33                     ctx.fill();
 34                 }
 35 
 36                 function smallcircle2(cx, cy, r) {
 37                     ctx.beginPath();
 38                     ctx.lineWidth = 1;
 39                     ctx.fillStyle = '#00f8bb';
 40                     ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
 41                     ctx.fill();
 42                 }*/
 43 
 44                 //画圆
 45                 function circle(cx, cy, r) {
 46                     ctx.beginPath();
 47                     ctx.lineWidth = lineWidth;
 48                     ctx.strokeStyle = '#eee';
 49                     ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
 50                     //ctx.arc(cx, cy, r, Math.PI * 2 / 3, Math.PI * 1 / 3);
 51                     ctx.stroke();
 52                 }
 53 
 54                 //画弧线
 55                 function sector(cx, cy, r, startAngle, endAngle, anti) {
 56                     ctx.beginPath();
 57                     ctx.lineWidth = lineWidth;
 58 
 59                     // 渐变色 - 可自定义
 60                     var linGrad = ctx.createLinearGradient(
 61                         circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY
 62                     );
 63                     linGrad.addColorStop(0.0, '#06a8f3');
 64                     linGrad.addColorStop(1.0, '#00f8bb');
 65                     ctx.strokeStyle = linGrad;
 66                     //圆弧两端的样式
 67                     ctx.lineCap = 'round';
 68                     ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + endAngle / 100));
 69                     ctx.stroke();
 70                 }
 71 
 72                 //画弧线02
 73                 function sector2(cx, cy, r, startAngle, endAngle, anti) {
 74                     ctx.beginPath();
 75                     ctx.lineWidth = lineWidth;
 76 
 77                     // 渐变色 - 可自定义
 78                     var linGrad = ctx.createLinearGradient(
 79                         circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY
 80                     );
 81                     linGrad.addColorStop(0.0, '#06a8f3');
 82                     linGrad.addColorStop(1.0, '#00f8bb');
 83                     ctx.strokeStyle = linGrad
 84 
 85                     //圆弧两端的样式
 86                     ctx.lineCap = 'round';
 87                     ctx.arc(cx, cy, r * 3 / 4, Math.PI, Math.PI * (1 + endAngle / 100));
 88                     ctx.stroke();
 89                 }
 90                 //刷新
 91                 function loading() {
 92                     var percent3 = progress;
 93                     if(percent < percent2) percent = percent2;
 94                     if(process >= percent) clearInterval(circleLoading);
 95                     if(process2 >= percent) clearInterval(circleLoading);
 96                     //清除canvas内容
 97                     ctx.clearRect(0, 0, circleX * 2, circleY * 2);
 98 
 99                     //中间的字
100                     ctx.font = fontSize + 'px April';
101                     ctx.textAlign = 'center';
102                     ctx.textBaseline = 'middle';
103                     ctx.fillStyle = '#999';
104                     ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY*4/5);
105                     ctx.fillText("月度完成比",circleX, circleY);
106 
107                     //圆形
108                     circle(circleX, circleY, radius);
109 
110                     //圆弧
111                     sector(circleX, circleY, radius, Math.PI * 2 / 3, process);
112                     sector2(circleX, circleY, radius, Math.PI * 2 / 3, process2);
113                     //两端圆点
114                     //smallcircle1(50 + Math.cos(2 * Math.PI / 360 * 120) * 100, 150 + Math.sin(2 * Math.PI / 360 * 120) * 100, 5);
115                     //smallcircle2(50 + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * 100, 150 + Math.sin(2 * Math.PI / 360 * (120 + process * 3)) * 100, 5);
116                     //控制结束时动画的速度
117                     if(process < percent3) {
118                         if(process / percent > 0.90) {
119                             process += 0.30;
120                         } else if(process / percent > 0.80) {
121                             process += 0.55;
122                         } else if(process / percent > 0.70) {
123                             process += 0.75;
124                         } else {
125                             process += 1.0;
126                         }
127                     }
128 
129                     if(process2 < percent2) {
130                         if(process2 / percent > 0.90) {
131                             process2 += 0.30;
132                         } else if(process2 / percent > 0.80) {
133                             process2 += 0.55;
134                         } else if(process2 / percent > 0.70) {
135                             process2 += 0.75;
136                         } else {
137                             process2 += 1.0;
138                         }
139                     }
140 
141                 }
142 
143                 var process = 0.0;
144                 var process2 = 0.0;
145 
146                 var circleLoading = window.setInterval(function() {
147                     loading();
148                 }, 20);
149 
150             }
151             toCanvas('canvas', 50, 80);
152         </script>
153     </body>
154 
155 </html>
View Code

 

转载于:https://www.cnblogs.com/wush-1215/p/9355676.html

weixin_30588907
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用canvas绘制圆环进度条
u012890987的博客
11-28 1259
用canvas绘制圆环进度条–插件 简单写个可复用的绘制圆环进度条的插件，兼容移动端和pc端。 效果图如下： 使用方法： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&
canvas绘制进度圆环
susuzhe
06-04 2838
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;style&gt; #cavas{ ..
canvas实现半圆环形进度条
weixin_30894583的博客
03-05 929
html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉，您的浏览器不支持canvas</p> </canvas> js部分 toCanvas('canvas','red',30); /** * 生成环形进度...
canvas -半圆环进速条
weixin_44764873的博客
07-05 409
参考：进度条 js var _page = { scoreCanvas(id ,progress) { // canvas进度条 var canvas = document.getElementById(id); //获取屏幕的宽度 var clientWidth = api.winWidth; //根据设计图中的canvas画布的占比进行设置 v
canvas--圆形进度条
weixin_42069147的博客
06-19 245
<canvas id="canvas" width="800" height="800" style="border:1px solid #ccc"></canvas> <script> const can = document.getElementById('canvas'); const van = can.getContext('2d')...
用canvan实现绘制半圆环进度条
乐逍遥
02-16 1564
效果图 实现原理： 1.使用canvas绘制半圆弧，底图灰色半圆弧和颜色进度圆弧。 2.利用setInterval计时器，逐步改变颜色进度条，达到进度条的效果。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimu...
canvas绘制双圆环进度池
潇洒小杰杰的博客
02-04 371
vue绘制canvas绘制双圆环进度池组件 canvas绘制双圆环进度池 组件代码 <template> <canvas ref="circle" moz-opaque :width="width" :height="height" :BigColor="BigColor" :contentData="contentData" :allData="allData"
canvan绘制的双半圆环进度条
乐逍遥
02-16 491
效果图 实现原理： 1.使用canvas绘制两个半圆弧，底图灰色半圆弧和颜色进度圆弧。 2.利用setInterval计时器，逐步改变颜色进度条，达到进度条的效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="te.
用canvas画弧形进度条
weixin_30437337的博客
11-23 254
function toCanvas(id ,progress){ //canvas进度条 var canvas = document.getElementById(id), ctx = canvas.getContext("2d"), percent = progress, //最终百分比 circleX = canvas.width / 2, //中心x坐标...
canvas实现圆轨滑动
qq_45939676的博客
10-09 668
canvas实现圆轨滑动
Canvas半圆环进度条动画特效
06-24
Canvas半圆环进度条动画特效是一款半圆环的已领优惠券进度条特效，适用于圆环图表统计代码。
Canvas制作圆形进度条Loading效果
05-19
Canvas制作圆形进度条Loading效果
canvas-html5圆环进度条
03-07
上传文件时，如果文件较大，估计浏览器会处于一直加载中，如果用户不知道，误点其它操作，有可能造成文件上传失败，这里简单实现提示上传进度. 导入项目，运行http://localhost:8080/canvas/table.jsp 即可看到效果
Canvas半圆环进度条动画特效特效代码
03-20
Canvas半圆环进度条动画特效是一款半圆环的已领优惠券进度条特效，适用于圆环图表统计代码。
Canvas半圆形进度条动画特效
04-02
Canvas半圆形进度条动画特效是一款HTML5 Canvas实现的弧度半圆形百分比动画特效。
微信小程序—半圆（弧形）进度条
liumengyue的博客
05-06 2862
效果图： <canvas class="canvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;" canvas-id="circleBar"></canvas> data: { canvasWidth: 213, // 画布宽度 canvasHeight: 187, // 画布高度 value:60 , // 当前得分 total:100, // 总分值 },
半圆形进度条(小程序)
liushuanglian的博客
11-21 3553
近期在做一个读书类的小程序，这时需要作出一个半圆形的进度条，等级进度条，就想着用canvas来完成，在网上百度了一下，参阅了这这篇博客博客地址，在结合实际需求加以修改。 这是ui的图片，一看就能知道这个需要自定义标题栏，然后这是一个长图，标题栏和下面的进度条的背景得分开来。上进度条的代码， wxml <view class="progress"> <canvas c...
微信小程序-canvas 2d带动画的半圆形刻度进度条
sunzhibin的博客
03-16 1744
效果图 实现思路 代码过多，但不复杂 采用Canvas 2D，文档请搜索h5 canvas 开发文档； 定义4个canvas，通过相对定位重叠在一起： <!-- 绘制背景半圆刻度 --> <canvas type="2d" id="bgLine" style="position:absolute;"></canvas> <!-- 绘制百分比刻度（带动画） --> <canvas type="2d" id="line" st
小程序 canvas 画布半圆环
随风潜入夜，不白头
04-21 674
1、效果图： 2、wxml： <view class="fragrance_item"> <view class="fragPos"> <view class="fragNum">{{perfumePercent}}%</view> <view class="fragText">香水余量</view> </view> <view class="fragPsoReset"&gt.
android 半圆环进度条
最新发布
05-17
Android 提供了一个 `ProgressBar` 控件，可以用来显示进度条。如果要实现半圆环形进度条，可以通过自定义控件来实现。 以下是一个简单的实现方法： 1. 创建一个自定义控件类 `CircularProgressBar`，继承自 `View` 类。 2. 在 `CircularProgressBar` 类中添加一些属性，如进度条的颜色、宽度等。 3. 重写 `onDraw` 方法，绘制半圆环进度条。 具体实现步骤如下： 1. 在 `CircularProgressBar` 类中添加属性： ```java private int mProgress = 0; // 当前进度 private int mMax = 100; // 最大进度 private int mProgressColor = Color.BLUE; // 进度条颜色 private int mBackgroundColor = Color.GRAY; // 背景颜色 private float mStrokeWidth = 10f; // 进度条宽度 ``` 2. 在 `onDraw` 方法中绘制半圆环进度条： ```java @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 获取控件宽度和高度 int width = getWidth(); int height = getHeight(); // 计算圆心坐标和半径 int centerX = width / 2; int centerY = height / 2; int radius = Math.min(centerX, centerY) - (int) (mStrokeWidth / 2); // 绘制背景圆环 Paint backgroundPaint = new Paint(); backgroundPaint.setColor(mBackgroundColor); backgroundPaint.setStyle(Paint.Style.STROKE); backgroundPaint.setStrokeWidth(mStrokeWidth); canvas.drawCircle(centerX, centerY, radius, backgroundPaint); // 绘制进度圆环 Paint progressPaint = new Paint(); progressPaint.setColor(mProgressColor); progressPaint.setStyle(Paint.Style.STROKE); progressPaint.setStrokeWidth(mStrokeWidth); progressPaint.setStrokeCap(Paint.Cap.ROUND); // 设置为圆角形状 float sweepAngle = ((float) mProgress / mMax) * 180f; // 计算当前进度所占的角度 canvas.drawArc(new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius), -90f, sweepAngle, false, progressPaint); } ``` 3. 在 `CircularProgressBar` 类中添加方法，用于设置进度： ```java public void setProgress(int progress) { mProgress = progress; invalidate(); // 通知控件重绘 } ``` 这样就完成了一个简单的半圆环进度条控件的实现。在使用时，可以通过调用 `setProgress` 方法来更新进度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值