问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

信用评级半环形进度条该怎么做？

头像
小样
    19074367

    如图：

    clipboard.png

    想知道这种信用评级的进度条该怎么做，最好css可以的话希望可以知道思路是怎么做，在此求教。

    自己试着用canvas做出的了半环形就不知到该怎么做了，如下：

    clipboard.png

    代码如下：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>

<canvas id="myCanvas" width="424" height="212">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth=28;
    ctx.strokeStyle="#deab72";
    ctx.arc(212,212,184,Math.PI,false);
    ctx.stroke();
</script> 

</body>
</html>
    html5cssjavascript
    阅读 5.4k
    8 个回答
    得票最新
    头像
    kjbu2
      1663918
      ✓ 已被采纳
      头像
      wangfulin
        6.1k1513

        用canvas可以实现，大概思路：

        1. 设置 context.lineWidth
        2. context.arc(x, y, r, startAngle, endAngle, counterclockwise)
        3. 最上面黄色的小条条可以用 div 实现，覆盖canvas就行
        头像
        CRIMX
          9.1k2720

          谢邀，你这个效果用 svg 很好做啊，特别是 svg 自带 textPath。进度条可以参考倒计时。

          头像
          厦冰
            8.5k52638

            可以用svg，D3.js来做

            头像
            上官元恒
              8.7k73238
              var par = 0.4;//百分比
//code....
ctx.arc(212,212,184,Math.PI * par,false);
//code....
              头像
              changli
                1.2k668207

                css3的transform属性可以做到

                头像
                AmyLi
                  712

                  两个canvas 可以拼成一个圆 根据信用大小控制canvas的长度

                  头像
                  木纸鸢
                    8548

                    css的clip属性可以做

                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题