Canvas Teilkreis

Also habe ich einige Js-Code, um einen Kreis mit einem bestimmten Prozentsatz zu zeichnen, mein Problem ist, dass ich möchte, dass der leere Teil mit einer bestimmten Farbe auch ausgefüllt wird. Area Canvas Teilkreis

Hier ist mein Code:

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!"); 
    } 
}

Quelle

2016-11-01 steve

'Grad * Ma th.PI/180 sollte Ihnen die Radianten geben, glaube ich. – PHPglue

'360 * Prozent/100' sollte Ihnen die Grade pro Prozent geben. – PHPglue

[This] (http://stackoverflow.com/questions/6230363/how-to-draw-a-circle-sector-on-an-html5-canvas) kann auch helfen. – PHPglue

einen anderen Pfad so hinzufügen:

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!"); 
    } 
}

Quelle

2016-11-01 01:37:43

Canvas Teilkreis

Antwort

Verwandte Themen