鍍金池/ 問答/HTML5  HTML/ 信用評級半環(huán)形進(jìn)度條該怎么做？

信用評級半環(huán)形進(jìn)度條該怎么做？

如圖：

clipboard.png

想知道這種信用評級的進(jìn)度條該怎么做，最好css可以的話希望可以知道思路是怎么做，在此求教。

自己試著用canvas做出的了半環(huán)形就不知到該怎么做了，如下：

clipboard.png

代碼如下：

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

<canvas id="myCanvas" width="424" height="212">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。
</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>
回答
編輯回答
雨蝶

css3的transform屬性可以做到

2017年12月2日 21:46
編輯回答
墻頭草

css的clip屬性可以做

2017年12月26日 13:21
編輯回答
不歸路

兩個(gè)canvas 可以拼成一個(gè)圓 根據(jù)信用大小控制canvas的長度

2017年8月6日 09:04
編輯回答
入她眼

可以用svg，D3.js來做

2018年1月7日 15:27
編輯回答
笨笨噠

用canvas可以實(shí)現(xiàn)，大概思路：

  1. 設(shè)置 context.lineWidth
  2. context.arc(x, y, r, startAngle, endAngle, counterclockwise)
  3. 最上面黃色的小條條可以用 div 實(shí)現(xiàn)，覆蓋canvas就行
2018年7月20日 08:13
編輯回答
熟稔

簡單做了下。
鏈接地址

2018年2月3日 11:07
編輯回答
局外人

謝邀，你這個(gè)效果用 svg 很好做啊，特別是 svg 自帶 textPath。進(jìn)度條可以參考倒計(jì)時(shí)。

2018年5月25日 07:31
編輯回答
何蘇葉
var par = 0.4;//百分比
//code....
ctx.arc(212,212,184,Math.PI * par,false);
//code....
2017年12月26日 22:33