帆布部分圓

所以，我有一些js代碼來繪製一個具有指定百分比的圓圈，我的問題是我希望空白部分也用指定的顏色填充。 Area 帆布部分圓

這裏是我的代碼：

HTML：

<!DOCTYPE html> 
<html> 
    <script src="ion.js"></script> 
    <canvas data-width="5" data-ringcolor="blue" data-filledcolor="1" data-precentage="90" onclick="createNewChart(this, 40);"> 
    </canvas> 
</html>

JS：

function createNewChart(elemnt, radius) 
{ 
    if(elemnt.getAttribute("data-ringcolor") && elemnt.getAttribute("data-filledcolor") && elemnt.getAttribute("data-precentage") && elemnt.getAttribute("data-width")) 
    { 
     var percentage = Number(elemnt.getAttribute("data-precentage")); 

     var ctx = elemnt.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(95, 50, radius, 0, ((percentage/100) * 2) * Math.PI); 
     ctx.strokeStyle = elemnt.getAttribute("data-ringcolor"); 
     ctx.lineWidth = Number(elemnt.getAttribute("data-width")); 

     ctx.stroke(); 
    } 
    else 
    { 
     alert("Missing attribute!"); 
    } 
}

來源

2016-11-01 steve

'度*馬我相信，「PI/180」應該會給你弧度。 – PHPglue

'360 *百分之百/百分之'應該給你每度百分比。 – PHPglue

[This]（http://stackoverflow.com/questions/6230363/how-to-draw-a-circle-sector-on-an-html5-canvas）也可能有幫助。 – PHPglue

添加另一個路徑是這樣的：

function createNewChart(elemnt, radius) 
{ 
    if(elemnt.getAttribute("data-ringcolor") && elemnt.getAttribute("data-filledcolor") && elemnt.getAttribute("data-precentage") && elemnt.getAttribute("data-width")) 
    { 
     var percentage = Number(elemnt.getAttribute("data-precentage")); 

     var ctx = elemnt.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(95, 50, radius, 0, ((percentage/100) * 2) * Math.PI); 
     ctx.strokeStyle = elemnt.getAttribute("data-ringcolor"); 
     ctx.lineWidth = Number(elemnt.getAttribute("data-width")); 

     ctx.stroke(); 

     ctx.beginPath(); 
     ctx.arc(95, 50, radius, (percentage/100) * 2 * Math.PI, 2 * Math.PI); 
     ctx.strokeStyle = "red"; 
     ctx.lineWidth = Number(elemnt.getAttribute("data-width")); 

     ctx.stroke(); 
    } 
    else 
    { 
     alert("Missing attribute!"); 
    } 
}

來源

2016-11-01 01:37:43

回答

相關問題