正文

半圆形仪表盘进度条(代码片段)

cnaholic  cnaholic  2022-12-06  525

关键词：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
  <script>
    $(function()
        toCanvas(‘canvas‘,‘red‘,50/60*100);
    )
    
    
    /**
     *  生成环形进度条
     */
    function toCanvas(id, color, progress) 
        //canvas进度条
        var canvas = document.getElementById(id),
            ctx = canvas.getContext("2d"),
            percent = progress, //最终百分比
            circleX = canvas.width / 2, //中心x坐标
            circleY = canvas.height / 2, //中心y坐标
            radius = 60, //圆环半径
            cradius = 75, // canvas半径
            lineWidth = 6, //圆形线条的宽度
            fontSize = 20; //字体大小
        //两端圆点
        function smallcircle1(cx, cy, r) 
            ctx.beginPath();
            //ctx.moveTo(cx + r, cy);
            ctx.lineWidth = 1;
            ctx.fillStyle = ‘#06a8f3‘;
            ctx.arc(cx, cy, r, 0, Math.PI * 2);
            ctx.fill();
        
    
        function smallcircle2(cx, cy, r) 
            ctx.beginPath();
            //ctx.moveTo(cx + r, cy);
            ctx.lineWidth = 1;
            ctx.fillStyle = ‘#fff‘;
            ctx.arc(cx, cy, r, 0, Math.PI * 2);
            ctx.fill();
        
    
        //画圆
        function circle(cx, cy, r) 
            ctx.beginPath();
            //ctx.moveTo(cx + r, cy);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = ‘#eee‘;
            ctx.arc(cx, cy, r, Math.PI * 1, Math.PI * 2);
            ctx.stroke();
        
    
        //画弧线
        function sector(cx, cy, r, startAngle, endAngle, anti) 
            ctx.beginPath();
            //ctx.moveTo(cx, cy + r); // 从圆形底部开始画
            ctx.lineWidth = lineWidth;
    
            // 渐变色 - 可自定义
            //                      var linGrad = ctx.createLinearGradient(
            //                          circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY
            //                      );
            //                      linGrad.addColorStop(0.0, ‘#06a8f3‘);
            //                      //linGrad.addColorStop(0.5, ‘#9bc4eb‘);
            //                      linGrad.addColorStop(1.0, ‘#00f8bb‘);
            //                      ctx.strokeStyle = linGrad;
            // 进度条颜色
            ctx.strokeStyle = color;
            //圆弧两端的样式
            ctx.lineCap = ‘round‘;
    
            //圆弧
            ctx.arc(
                cx, cy, r,
                (Math.PI * 1),
                (Math.PI * 1) + endAngle / 100 * (Math.PI),
                false
            );
            ctx.stroke();
        
    
        //刷新
        function loading() 
            if (process >= percent) 
                clearInterval(circleLoading);
            
    
            //清除canvas内容
            ctx.clearRect(0, 0, circleX * 2, circleY * 2);
    
            //中间的字
            ctx.font = fontSize + ‘px April‘;
            ctx.textAlign = ‘center‘;
            ctx.textBaseline = ‘middle‘;
            ctx.fillStyle = ‘#999‘;
            ctx.fillText(parseFloat(process).toFixed(0) + ‘%‘, circleX, circleY);
    
            //圆形
            circle(circleX, circleY, radius);
    
            //圆弧
            sector(circleX, circleY, radius, Math.PI * 1, process);
            //两端圆点
            // smallcircle1(cradius + Math.cos(2 * Math.PI / 360 * 120) * radius, cradius + Math.sin(2 * Math.PI / 360 * 120) *
            //     radius, 0);
            // smallcircle2(cradius + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * radius, cradius + Math.sin(2 * Math.PI /
            //     360 * (120 + process * 3)) * radius, 2);
            //控制结束时动画的速度
            if (process / percent > 0.90) 
                process += 0.30;
             else if (process / percent > 0.80) 
                process += 0.55;
             else if (process / percent > 0.70) 
                process += 0.75;
             else 
                process += 1.0;
            
        
    
        var process = 0.0; //进度
        var circleLoading = window.setInterval(function() 
            loading();
        , 20);
    
    
  </script>
</head>
<body>
  <canvas id="canvas" width="300" height="300">
    <p>抱歉，您的浏览器不支持canvas</p>
 </canvas>
</body>
</html>

效果图

技术图片

wpf实现圆形进度条(代码片段)

WPF实现圆形进度条控件名：CircularProgressBar作者：WPFDevelopersOrg-驚鏵原文链接[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用.NET40；VisualStudio2019;CircularProgressBar继承ProgressB 查看详情

svg的圆形进度条(代码片段)

目前发现svg实现一些动画效果是比较高效简单的。如圆形进度条，只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现，而且美观。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title 查看详情

composecanvas自定义圆形进度条(代码片段)

@ComposablefunCircleRing(boxWidthDp:Int,viewModel:TaskViewModel)Canvas(modifier=Modifier.size(boxWidthDp.dp),onDraw=valstrokWidth=30F//灰色背景drawArc(Color(0,0,0,15),startAngle=160f,s 查看详情

android自定义控件篇圆形进度条(代码片段)

一、效果图二、代码逻辑/***funcation:圆形进度条控件*/publicclassCircleProgressViewextendsViewprivatePaintmBackPaint,mProgPaint;//绘制画笔privateRectFmRectF;//绘制区域privateint[]mColorArray;//圆环渐变色privateintmProgress;//圆环进度(0-100)publicCircleProgressView(Co... 查看详情

解决圆形进度条progressbar的几个问题(代码片段)

Android自带的Progressbar默认就是圆形的，可以通过style属性style="?android:attr/progressBarStyleHorizontal"变成条状进度条，如下：<ProgressBarandroid:layout_width="match_parent"androi 查看详情

解决圆形进度条progressbar的几个问题(代码片段)

可拖拽圆形进度条组件（支持移动端）(代码片段)

.katexdisplay:block;text-align:center;white-space:nowrap;.katex-display>.katex>.katex-htmldisplay:block;.katex-display>.katex>.katex-html>.tagposition:absolute;right:0px;.katexfont:1.21em/1.2Ka 查看详情

微信小程序进度条详解progress自定圆形进度条(代码片段)

...天就好。在微信小程序开发中，progress用来实现水平进度条效果1基本使用<progresspercent="80"stroke-width="12"show-infocolor="pink"active/>效果就是如上图所示percent表示当前的进度stroke-width进度条的宽度color... 查看详情

android自定义圆弧进度条（半圆进度条）圆弧渐变色进度条带指示圆弧宽高可自由修改(代码片段)

...c;下面也会给出源码。不多说，直接上源码：圆弧进度条控件：/***Createdbyyfxon2022/10/1117:32**/publicclassCircleBarViewextendsViewprivatePaintrPaint;//绘制矩形的画笔privatePaintprogressPaint;//绘制圆弧的画笔privatePaintanchorPaint,anchorBgPaint;//... 查看详情

酷炫进度条自定义seekbar(代码片段)

...可以知道这类似android自带的seekbar控件，2、一个水平进度条和一个圆形进度条；3、圆形进度条显示环形刻度和当前进度值；4、并且圆形进度可滑动操作；最终实现效果：废话不多说上代码：水平的进度条&... 查看详情

如何重新加载圆形进度条

】如何重新加载圆形进度条【英文标题】：howtoreloadacircularprogressbar【发布时间】：2015-12-0921:59:58【问题描述】：我对画布以及如何创建圆形进度条进行了一些网络搜索，我得到了这个。我对在网上找到的代码片段进行了一些更... 查看详情

androidprogressbar（进度条）的简单使用(代码片段)

圆形进度条只需要加入ProgressBar，默认即是圆形xml文件<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">< 查看详情

圆形百分比进度条效果(代码片段)

..."></div> <divclass="text">%</div></div>12342.当进度小于等于50%时，往右侧浅蓝色的半圆里添加一子元素，是个填充满它的灰色半圆，根据进度的值对该灰色半圆进行顺时针旋转，就会显示出代表进度的浅蓝色。圆一圈... 查看详情

newuwpcommunitytoolkit-radialprogressbar(代码片段)

概述UWPCommunityToolkit 中有一个圆形的进度条控件-RadialProgressBar，本篇我们结合代码详细讲解 RadialProgressBar的实现。RadialProgressBar是一种圆形的进度条控件，进度值用圆形中的填充色的角度来表示，进度增长，填充色按照顺... 查看详情

h5canvas实现圆形时间倒计时进度条(代码片段)

在项目中，我们会遇到需要显示进度条或者倒计时的功能，我们今天就来实现一下。一、效果展示实现效果要求：1.环形倒计时2.能够根据总时间和当前时间进行比例性的倒计时3.进度条环形能够有颜色渐变效果4.中间... 查看详情

h5canvas实现圆形时间倒计时进度条(代码片段)

delphi:圆形进度(环形进度)(代码片段)

起源：重回DC5项目，资源下载美工提供圆形进度条，复习Delphi，为实现其颇觉有趣，遂研究其。最终效果图如下：实现：制作TCircleProgress控件，实现方法参照系统之TGauge控件，CSDN上tp机器猫一个源码，结合GDI+绘制技术实现... 查看详情

androiduipath测量pathmeasure⑤(pathmeasure#getsegment函数|圆形进度条示例)(代码片段)

文章目录一、PathMeasure#getSegment函数二、代码示例三、执行效果一、PathMeasure#getSegment函数PathMeasure官方文档:https://developer.android.google.cn/reference/kotlin/android/graphics/PathMeasurePathMeasure#getSegment函数的作用是截取Path中的一段,形成新的Path... 查看详情