캔버스 부분 원

그래서, 지정된 백분율로 원을 그려야하는 js 코드가 있는데, 빈 부분을 지정된 색으로 채우고 싶습니다.캔버스 부분 원

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

'도 * 마 여기 Area

내 코드입니다 th.PI/180'은 라디안을 줄 것입니다. – PHPglue

'360 * percent/100'는 퍼센트를 제공해야합니다. – 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

캔버스 부분 원

답변

관련 문제