Canvas Arc: Kreise und Bögen
Bögen oder Arcs sind Teile eines Kreises. arc() hängt einen Kreisbogen mit einem Mittelpunkt bei (x,y) und einem Radius r an den aktuellen Pfad oder zeichnet ganz einfach Kreise und Kreisbögen.
+-- true, wenn der Bogen | gegen den Uhrzeiger gezeichnet wird arc (x, y, r, sA, eA, aC) | | | | | | | | | +-- Endwinkel | | | | | | | +-- Anfänglicher Winkel | | | +---+ +-- Radius | Ursprung des Bogens
- arc (x, y, r, sA, eA, aC)
- fügt dem aktuellen Pfad einen Bogen an Position (x,y) hinzu.
x / y ist das Zentrum des Kreises.
r ist der Radius, - arcTo (x1, y1, x2, y2, r)
- fügt dem aktuellen Pfad an der Position der Feder einen Bogen mit mit Radius r hinzu
- closePath()
- schließt den aktuellen Zeichenpfad
ctx.beginPath(); ctx.arc(100, 120, 90, 0, 2 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(300, 120, 90, 0, 1 * Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(500, 120, 90, 0, 1 * Math.PI, true); ctx.stroke();
Grad in Radiant umrechnen
let rad = (Math.PI / 180) * degrees;
if (canvas && canvas.getContext) { let ctx = canvas.getContext("2d"); if (ctx) { ctx.fillStyle = "hsla(68,80%,60%,0.3)"; ctx.strokeStyle = "hsla(30,80%,60%,0.9)"; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc (150, 150, 100, (2)*Math.PI, (1/3)*Math.PI, false); ctx.stroke(); ctx.lineTo(150, 150); ctx.stroke(); ctx.fill(); ctx.closePath();ctx.stroke(); ctx.beginPath(); ctx.arc (450, 150, 100, (2)*Math.PI, (1/3)*Math.PI, true); … } }
Kleine Tabelle Radiant zu Grad
rad | rad | Grad (°) |
---|---|---|
0 rad | 0 rad | 0° |
π/6 | 0.5235987756 | 30° |
π/4 | 0.7853981634 | 45° |
π/3 | 1.0471975512 | 60° |
π/2 | 1.5707963268 | 90° |
2π/3 | 2.0943951024 | 120° |
3π/4 | 2.3561944902 | 135° |
5π/6 | 2.6179938780 | 150° |
π | 3.1415926536 | 180° |
3π/2 | 4.7123889804 | 270° |
2π | 6.2831853072 | 360° |
Tortengrafik mit Canvas
array.reduce() extrahiert Werte aus einem Array ([0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue; });).
let results = [ {name: "Sehr zufrieden", count: 110, color: "hsl(150,60%,80%)"}, {name: "Zufrieden", count: 300, color: "hsl(200,60%,80%)"}, {name: "Neutral", count: 200, color: "hsl(250,60%,80%)"}, {name: "Unzufrieden", count: 150, color: "hsl(300,60%,80%)"} ]; let cx = document.querySelector(".arc").getContext("2d"); let total = results.reduce(function(sum, choice) { return sum + choice.count; }, 0); let currentAngle = -0.5 * Math.PI; results.forEach(function(result) { let sliceAngle = (result.count / total) * 2 * Math.PI; cx.beginPath(); cx.arc(100, 100, 100, currentAngle, currentAngle + sliceAngle); currentAngle += sliceAngle; cx.lineTo(100, 100); cx.fillStyle = result.color; cx.fill(); });