使用HTML，CSS和JavaScript增加圓弧效果

Question

我不知道這個效果是否有名稱，但基本上是一個增加並最終成爲圓的圓弧。

我希望這張圖片能給你一個想法。

基本上我需要創建一個弧，其長度可以通過JavaScript改變（保持相同的半徑）。我真的想嘗試用div和邊框半徑來做這個（使用寬度，高度，左邊，頂部，邊框半徑）

所以，爲了達到90度的弧度就像在（1）這樣的：

-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border-radius: 50%; 

然而，電弧將開始與當時的單個像素增加將成爲（1），然後（2），（3），最後一個完整的圓一個我的問題就是這個了。邊框不是剛性固體邊界，但是這樣的事情：

邊框的顏色強度會鬆散到弧線的末端，這將是我不知道如何修復的第一個問題。其次，你是否知道一些算法可以使用大小，位置和邊界半徑來幫助你創建一個具有指定大小和半徑的弧？

Answer 1

您可以使用畫布和簡單的JS輕鬆做到這一點。

JS

var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 
//ctx.arc(100,75,50,0,2*Math.PI); //Full circle 
//ctx.arc(100,75,50,0,1.5*Math.PI); //3/4 circle 
//ctx.arc(100,75,50,0,Math.PI); //Half circle 
ctx.arc(100,75,50,0,0.5*Math.PI); //1/4 circle 
ctx.stroke(); 

HTML

<canvas id="canvas"></canvas> 

的jsfiddle：http://jsfiddle.net/r3CSS/

語法.ARC是：.ARC（x座標，y座標，半徑，開始角度，端角度[，逆時針]）;