帆布部分圆

所以，我有一些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

回答

相关问题