Zeichnung Kreisabschnitte HTML5-Canvas mit - Math.PI

Ich wünschte, ich die Zeit, diese & die möglichen Antworten untersuchen zu debuggen hatte, die oben aufgetaucht, während diese Frage zu schreiben, aber ich werde sicherlich tut dies so bald wie möglich;)Zeichnung Kreisabschnitte HTML5-Canvas mit - Math.PI

Auf meine eigentliche Frage: Ich versuche, gekrümmte Formen entlang eines Kreises zu zeichnen, aber ich kann nicht herausfinden, ob dies ein dummer Fehler ist oder der Schrei von einem Bedarf der Quadranten Handhabung (NB: Ich bin ziemlich neu zu denen; p)

Von dem, was ich sagen kann, scheint der Code 'gut für eine einzige Form, aber es verwirrt, wenn aus einer Schleife zu Formen laufen:/

Code, der für eine Form arbeitet (& wahrscheinlich nur an diesem Ort;))

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 
var graphValues = [1, 2, 3, 4, 5]; 
 

 
var c = document.getElementById("myCanvas2"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// setup circle 
 
// now onto drawing lines & stuff on a circle 
 
var inner_radius = 20; 
 
var radius = 80; 
 
var point_size = 4; 
 
var center_x = c.width/2; 
 
var center_y = c.height/2; 
 
var font_size = "20px"; 
 

 
// draw the circle 
 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
drawCircle(); 
 

 
// draw the inner circle 
 
function drawInnerCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
drawInnerCircle(); 
 

 

 
var horiStep360 = 360/graphValues.length-1; // way A 
 
var step360 = 0; 
 

 
// another helper to draw lines from the outer part of the circle to the center 
 
function drawCurvedSection(angle){ 
 
    var nextAngle = angle + horiStep360; 
 

 
    var innerCircle_start_x = center_x + inner_radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var innerCircle_start_y = center_y + inner_radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var innerCircle_end_x = center_x + inner_radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var innerCircle_end_y = center_y + inner_radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    var outerCircle_start_x = center_x + radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var outerCircle_start_y = center_y + radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var outerCircle_end_x = center_x + radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var outerCircle_end_y = center_y + radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, angle, nextAngle); 
 
    
 
    ctx.arc(center_x, center_y, radius, angle, nextAngle); 
 
    
 
    ctx.closePath(); 
 
    ctx.strokeStyle = 'blue'; 
 
    ctx.stroke(); 
 
    // TODO: fill with random/diff color 
 
} 
 

 

 
//step360 = 0; // reset before reuse 
 
/* 
 
graphValues.forEach(function(val){ 
 
    //drawPoint(180 - step360, 1, val); // way A reverse (draw counterclockwise) 
 
    //drawPoint(step360, 1, val); // way A 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
}); 
 
*/ 
 
//drawCurvedSection(step360); 
 

 

 

 
var nextAngle = step360 + horiStep360; 
 

 
ctx.beginPath(); 
 

 
//ctx.arc(center_x, center_y, inner_radius, -step360, Math.PI-nextAngle); // PAIR A - original 
 
ctx.arc(center_x, center_y, inner_radius, nextAngle*Math.PI/180, step360, true); 
 
ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // PAIR A 
 

 

 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
</script> 
 

 
</body> 
 
</html>

Code, der noch wip ist:/..

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 
var graphValues = [1, 2, 3, 4, 5]; 
 

 
var c = document.getElementById("myCanvas2"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// setup circle 
 
// now onto drawing lines & stuff on a circle 
 
var inner_radius = 20; 
 
var radius = 80; 
 
var point_size = 4; 
 
var center_x = c.width/2; 
 
var center_y = c.height/2; 
 
var font_size = "20px"; 
 

 
// draw the circle 
 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
drawCircle(); 
 

 
// draw the inner circle 
 
function drawInnerCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
drawInnerCircle(); 
 

 

 
var horiStep360 = 360/graphValues.length-1; // way A 
 
var step360 = 0; 
 

 
// another helper to draw lines from the outer part of the circle to the center 
 
function drawCurvedSection(angle){ 
 
    var nextAngle = angle + horiStep360; 
 

 
    /* 
 
    var innerCircle_start_x = center_x + inner_radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var innerCircle_start_y = center_y + inner_radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var innerCircle_end_x = center_x + inner_radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var innerCircle_end_y = center_y + inner_radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    var outerCircle_start_x = center_x + radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var outerCircle_start_y = center_y + radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var outerCircle_end_x = center_x + radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var outerCircle_end_y = center_y + radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 
    */ 
 

 
    ctx.beginPath(); 
 
    /* 
 
    ctx.arc(center_x, center_y, inner_radius, angle, nextAngle); 
 
    ctx.arc(center_x, center_y, radius, angle, nextAngle); 
 
    */ 
 
    ctx.arc(center_x, center_y, inner_radius, -step360, -Math.PI-nextAngle, true); // false :/ 
 
    ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // good ? 
 
    
 
    ctx.closePath(); 
 
    //ctx.strokeStyle = 'blue'; 
 
    //ctx.stroke(); 
 
    // TODO: fill with random/diff color 
 
    ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    ctx.fill(); 
 
} 
 

 

 
//step360 = 0; // reset before reuse 
 

 
graphValues.forEach(function(val){ 
 
    //drawPoint(180 - step360, 1, val); // way A reverse (draw counterclockwise) 
 
    //drawPoint(step360, 1, val); // way A 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
}); 
 
//drawCurvedSection(step360); 
 

 

 
/* 
 
var nextAngle = step360 + horiStep360; 
 
ctx.beginPath(); 
 
//ctx.arc(center_x, center_y, inner_radius, -step360, Math.PI-nextAngle); // PAIR A - original 
 
ctx.arc(center_x, center_y, inner_radius, nextAngle*Math.PI/180, step360, true); 
 
ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // PAIR A 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 
</script> 
 

 
</body> 
 
</html>

Dieses Wesen sagte, ich werde auf meiner Seite versuchen, aber ich wette, ich muss einige Tests machen, bevor ich es herausfinden (und wissen, warum es Störungen & wie es zu beheben :))

Wir wünschen alle S.O. Leser einen sehr schöner & sonniger Tag;) +

- Bearbeiten -

Ein schneller Test es klar gemacht, was verwendet werden muss, aber nicht, warum funktioniert es nicht - ich hoffe, es würde klar sein, bald (.Derzeit zieht Pentagramme: /) -> was meine Frage eigentlich über war (abgesehen von zu wissen, es meinen Code auf einem anderen Punkt falsch war (e):

ctx.arc(100, 75, 50, (Math.PI*2/360)*<theAngle>, (Math.PI*2/360)*<theNextAngle>);

(yup, das wäre ziemlich blöd von mir, aber jetzt weiß ich ^^)

example attached below hosted on w3schools editor

folgenden Ausschnitt zeigen, dass es "manuallly" für gestreichelt zu funktionieren scheint, aber ich überprüfen, noch nicht mit Formen (..)

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 

 
var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*0, (Math.PI*2/360)*72); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 

 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*72, (Math.PI*2/360)*144); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 

 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*144, (Math.PI*2/360)*216); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 

 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*216, (Math.PI*2/360)*288); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 

 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*288, (Math.PI*2/360)*360); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 
</script> 
 

 
</body> 
 
</html>

Quelle

2017-05-29 StephaneAG

Was Sie fehlen ist das letzte Argument der Funktion ctx.arc

ctx.arc(x,y,radius,startAngle, endAngle, direction);

Richtung wenn true, zeigt den Bogen, der gegen den Uhrzeigersinn gezeichnet werden soll, andernfalls falsch im Uhrzeigersinn.

Wenn Sie also von innen nach außen zeichnen, müssen Sie gegen den Uhrzeigersinn und dann im Uhrzeigersinn gehen.

const ctx = canvas.getContext("2d"); 
 
const cols = [ 
 
    "hsl(0,100%,50%)", 
 
    "hsl(40,100%,50%)", 
 
    "hsl(70,100%,50%)", 
 
    "hsl(100,100%,50%)", 
 
    "hsl(150,100%,50%)", 
 
    "hsl(250,100%,50%)", 
 
]; 
 
var startAng = 0; 
 
var endAng = 1; 
 
var innerRad = 50; 
 
var outerRad = 100; 
 
ctx.lineWidth = 3; 
 
ctx.lineJoin = "round"; 
 
ctx.strokeStyle = "black"; 
 
function drawSlice(x,y,start,end,innerRad,outerRad,col){ 
 
    ctx.fillStyle = col; 
 
    ctx.beginPath(); 
 
    ctx.arc(x,y,innerRad,end,start,true); 
 
    ctx.arc(x,y,outerRad,start,end,false); 
 
    ctx.closePath(); // to close path for stroke command 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
} 
 
var count = 0; 
 
for(var i = 0; count < cols.length; i += 1){ 
 
    drawSlice(200,200,i,i+0.9,innerRad,outerRad,cols[count++]) 
 

 
}

<canvas id=canvas width= 400 height = 400></canvas>

Quelle

2017-05-29 15:55:36 Blindman67

hilft ich sehe, Sie bearbeiten noch Ihre Antwort -> Dank Kumpel :) Auch lassen Sie mich meine Frage verfeinern: da standardmäßig das letzte Argument der ctx.arc fcn ist falsch, was müsste im untenstehenden Code geändert werden, damit es funktioniert? 'ctx.arc (center_x, center_y, inner_radius, -step360, -Math.PI-nextAngle, true); // benötigt eine Korrektur " ' ctx.arc (center_x, center_y, radius, -step360, Math.PI-nextAngle); ' – StephaneAG

@StephaneAG Anfangs- und Endwinkel müssen an den richtigen Positionen sein. Hinweis in der Antwort sind die Start- und Endwinkel vertauscht. Auch die Winkel sind absolute Winkel (für mich sieht step360 aus wie es ist ein Offset aber könnte falsch sein). Also, wenn der letzte Arg wahr ist, dann ist es von ang1? gegen den Uhrzeigersinn gegen ang2? und wenn falsch ist es von ang1? im Uhrzeigersinn zu ang2 für 'arc (x, y, rad, ang1, ang2' – Blindman67

Thx für die schnelle Antwort:' var horiStep360 = 360/graphValues.length; 'ist eine beliebige Anzahl von gleich großen Sektionen zu bekommen,' step360'is Um zu wissen, welcher Winkel wir sind und welchen Winkel der nächste sein wird, zB: Für 5 Werte gehen wir von 0 ° bis 72 °, 72 ° bis 144 °, 144 ° bis 216 °, 216 ° bis 288 ° und schließlich 288 ° bis 260 ° Die Sache ist: Ich kann keine Formel mit 'Winkel' & 'nextAngle' für Start Winkel & Ende Winkel, die für jeden Abschnitt funktioniert, aka 'ctx.arc (center_x, center_y, inner_radius, step360 ??, nextAngle ??, true); ' ' ctx.arc (center_x, center_y, radius, step360, nextAngle ??); ' :/ – StephaneAG

Also, die richtige Antwort war ..

(..) 
ctx.arc(center_x, center_y, inner_radius, (Math.PI*2/360)*nextAngle, (Math.PI*2/360)*angle, true); 
ctx.arc(center_x, center_y, radius, (Math.PI*2/360)*angle, (Math.PI*2/360)*nextAngle, false); 
(..)

- Bearbeiten -

Weitere noch deutlicher Klärung, ich habe vergessen Um Grad in Radiant umzuwandeln, bevor Sie sie verwenden:/

var deg = angle; // angle in ° 
var rads = Math.PI/180*deg; // simpler yet same as (Math.PI*2/360)*deg

Zur Erinnerung wird die (Math.PI*2/360)*angleDegree immer nur die Grade sowohl für den Winkel & die nextAngle, während der ‚Trick‘ zu erinnern ist, die Argumente wechseln bestellen, wenn die optionale Richtung Parameter. So waren die Formeln benötigt innerhalb der Funktionsaufruf:

ctx.arc(x, y, rad, (Math.PI*2/360)*2ndAngle, (Math.PI*2/360)*1stangle, true); 
ctx.arc(x, y, outRad, (Math.PI*2/360)*1stangle, (Math.PI*2/360)*2ndAngle, false);

Hub verwenden(), dies macht:

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 
var graphValues = [1, 2, 3, 4, 5]; 
 

 
var c = document.getElementById("myCanvas2"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// setup circle 
 
// now onto drawing lines & stuff on a circle 
 
var inner_radius = 20; 
 
var radius = 80; 
 
var point_size = 4; 
 
var center_x = c.width/2; 
 
var center_y = c.height/2; 
 
var font_size = "20px"; 
 

 
// draw the circle 
 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
//drawCircle(); 
 

 
// draw the inner circle 
 
function drawInnerCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
//drawInnerCircle(); 
 

 

 
//var horiStep360 = 360/graphValues.length-1; // made it work when testing single one ?! 
 
var horiStep360 = 360/graphValues.length; // to gett ful 36° per item 
 
// for 5 values: 
 
// 0° -> 72° 
 
// 72° -> 144° 
 
// 144° -> 216° 
 
// 216° -> 288° 
 
// 288° -> 360° 
 
var step360 = 0; 
 

 
// another helper to draw lines from the outer part of the circle to the center 
 
function drawCurvedSection(angle){ 
 
    var nextAngle = angle + horiStep360; 
 
    console.log('current angle: ' + angle + '° & next angle: ' + nextAngle + '°'); 
 

 
    /* 
 
    var innerCircle_start_x = center_x + inner_radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var innerCircle_start_y = center_y + inner_radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var innerCircle_end_x = center_x + inner_radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var innerCircle_end_y = center_y + inner_radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    var outerCircle_start_x = center_x + radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var outerCircle_start_y = center_y + radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var outerCircle_end_x = center_x + radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var outerCircle_end_y = center_y + radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 
    */ 
 

 
    ctx.beginPath(); 
 
    
 
    //ctx.arc(center_x, center_y, inner_radius, angle, nextAngle); 
 
    //ctx.arc(center_x, center_y, radius, angle, nextAngle); 
 
    //ctx.arc(center_x, center_y, inner_radius, -step360, -Math.PI-nextAngle, true); // false 
 
    //ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // good ? 
 
    //ctx.arc(center_x, center_y, inner_radius, -angle, -nextAngle, true); // false 
 
    //ctx.arc(center_x, center_y, radius, -angle, -nextAngle); // good ? 
 
    
 
    // debug 
 
    //ctx.arc(center_x, center_y, inner_radius, angle*Math.PI*2/180, nextAngle*Math.PI*2/180, true); 
 
    //ctx.arc(center_x, center_y, radius, angle*Math.PI*2/180, nextAngle*Math.PI*2/180, false); 
 
    // R: invert the angle & nextAngle AS WELL AS set optional direction parameter !!! -> WORKS !!!! 
 
    ctx.arc(center_x, center_y, inner_radius, (Math.PI*2/360)*nextAngle, (Math.PI*2/360)*angle, true); 
 
    ctx.arc(center_x, center_y, radius, (Math.PI*2/360)*angle, (Math.PI*2/360)*nextAngle, false); 
 
    
 
    ctx.closePath(); 
 
    //ctx.strokeStyle = 'blue'; 
 
    ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    ctx.stroke(); 
 
    // TODO: fill with random/diff color 
 
    //ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    //ctx.fill(); 
 
} 
 

 

 
//step360 = 0; // reset before reuse 
 

 
graphValues.forEach(function(val){ 
 
    //drawPoint(180 - step360, 1, val); // way A reverse (draw counterclockwise) 
 
    //drawPoint(step360, 1, val); // way A 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
}); 
 

 
//drawCurvedSection(step360); - to be called manually to step through & see where/why glitch begins 
 
function debugDrawCurvedSection(){ 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
} 
 
//debugDrawCurvedSection(); // ok .. 
 
//debugDrawCurvedSection(); // fucked up 
 
//debugDrawCurvedSection(); 
 

 
/* 
 
var nextAngle = step360 + horiStep360; 
 
ctx.beginPath(); 
 
//ctx.arc(center_x, center_y, inner_radius, -step360, Math.PI-nextAngle); // PAIR A - original 
 
ctx.arc(center_x, center_y, inner_radius, nextAngle*Math.PI/180, step360, true); 
 
ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // PAIR A 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 

 
// manual tests 
 
/* 
 
ctx.beginPath(); 
 
ctx.arc(center_x, center_y, inner_radius, 0, 2, true); 
 
ctx.arc(center_x, center_y, radius, 0, 2, false); 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 
</script> 
 

 
</body> 
 
</html>

Mit füllen(), dies macht:

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 
var graphValues = [1, 2, 3, 4, 5]; 
 

 
var c = document.getElementById("myCanvas2"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// setup circle 
 
// now onto drawing lines & stuff on a circle 
 
var inner_radius = 20; 
 
var radius = 80; 
 
var point_size = 4; 
 
var center_x = c.width/2; 
 
var center_y = c.height/2; 
 
var font_size = "20px"; 
 

 
// draw the circle 
 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
//drawCircle(); 
 

 
// draw the inner circle 
 
function drawInnerCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
//drawInnerCircle(); 
 

 

 
//var horiStep360 = 360/graphValues.length-1; // made it work when testing single one ?! 
 
var horiStep360 = 360/graphValues.length; // to gett ful 36° per item 
 
// for 5 values: 
 
// 0° -> 72° 
 
// 72° -> 144° 
 
// 144° -> 216° 
 
// 216° -> 288° 
 
// 288° -> 360° 
 
var step360 = 0; 
 

 
// another helper to draw lines from the outer part of the circle to the center 
 
function drawCurvedSection(angle){ 
 
    var nextAngle = angle + horiStep360; 
 
    console.log('current angle: ' + angle + '° & next angle: ' + nextAngle + '°'); 
 

 
    /* 
 
    var innerCircle_start_x = center_x + inner_radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var innerCircle_start_y = center_y + inner_radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var innerCircle_end_x = center_x + inner_radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var innerCircle_end_y = center_y + inner_radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    var outerCircle_start_x = center_x + radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var outerCircle_start_y = center_y + radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var outerCircle_end_x = center_x + radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var outerCircle_end_y = center_y + radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 
    */ 
 

 
    ctx.beginPath(); 
 
    
 
    //ctx.arc(center_x, center_y, inner_radius, angle, nextAngle); 
 
    //ctx.arc(center_x, center_y, radius, angle, nextAngle); 
 
    //ctx.arc(center_x, center_y, inner_radius, -step360, -Math.PI-nextAngle, true); // false 
 
    //ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // good ? 
 
    //ctx.arc(center_x, center_y, inner_radius, -angle, -nextAngle, true); // false 
 
    //ctx.arc(center_x, center_y, radius, -angle, -nextAngle); // good ? 
 
    
 
    // debug 
 
    //ctx.arc(center_x, center_y, inner_radius, angle*Math.PI*2/180, nextAngle*Math.PI*2/180, true); 
 
    //ctx.arc(center_x, center_y, radius, angle*Math.PI*2/180, nextAngle*Math.PI*2/180, false); 
 
    // R: invert the angle & nextAngle AS WELL AS set optional direction parameter !!! -> WORKS !!!! 
 
    ctx.arc(center_x, center_y, inner_radius, (Math.PI*2/360)*nextAngle, (Math.PI*2/360)*angle, true); 
 
    ctx.arc(center_x, center_y, radius, (Math.PI*2/360)*angle, (Math.PI*2/360)*nextAngle, false); 
 
    
 
    ctx.closePath(); 
 
    //ctx.strokeStyle = 'blue'; 
 
    //ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    //ctx.stroke(); 
 
    // TODO: fill with random/diff color 
 
    ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    ctx.fill(); 
 
} 
 

 

 
//step360 = 0; // reset before reuse 
 

 
graphValues.forEach(function(val){ 
 
    //drawPoint(180 - step360, 1, val); // way A reverse (draw counterclockwise) 
 
    //drawPoint(step360, 1, val); // way A 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
}); 
 

 
//drawCurvedSection(step360); - to be called manually to step through & see where/why glitch begins 
 
function debugDrawCurvedSection(){ 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
} 
 
//debugDrawCurvedSection(); // ok .. 
 
//debugDrawCurvedSection(); // fucked up 
 
//debugDrawCurvedSection(); 
 

 
/* 
 
var nextAngle = step360 + horiStep360; 
 
ctx.beginPath(); 
 
//ctx.arc(center_x, center_y, inner_radius, -step360, Math.PI-nextAngle); // PAIR A - original 
 
ctx.arc(center_x, center_y, inner_radius, nextAngle*Math.PI/180, step360, true); 
 
ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // PAIR A 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 

 
// manual tests 
 
/* 
 
ctx.beginPath(); 
 
ctx.arc(center_x, center_y, inner_radius, 0, 2, true); 
 
ctx.arc(center_x, center_y, radius, 0, 2, false); 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 
</script> 
 

 
</body> 
 
</html>

Dank an alle, ich hoffe, dass dies jemand anderes :)

Quelle

2017-05-29 17:50:34 StephaneAG

Zeichnung Kreisabschnitte HTML5-Canvas mit - Math.PI

Antwort

Verwandte Themen