Kurvendarstellung
Gegenüberstellung Canvas Element und SVG Zeichenfläche
Canvas Darstellung
SVG Darstellung
Die Darstellungen sind mit Kurven- und Kontrollpunkten im Uhrzeigersinn versehen. Kontrollpunkte haben die Farbe des Vorgängers, Kurvenpunkte und gedachte Linien zum Kontrollpunkt sind gleichfarbig. So versuche ich grafisch eine Orientierung zu vermiteln.
Für die Kurvenbeschreibung setze ich die quadratische obj.quadraticCurveTo(cx, cy, x, y); ein.
Wie im nebenstehenden SVG-Modell bereits festgetellt werden muss, führt die quadratische Bézier-Kurvenform nicht zum gewünschten Ergebnis. Das Canvas-Element zeigt ein identisches Aussehen.
context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 368);
context.quadraticCurveTo(100, 368, 104, 340);
context.quadraticCurveTo(120, 320, 104, 300);
context.quadraticCurveTo( 60, 248, 88, 220);
context.quadraticCurveTo(132, 152, 132, 100);
context.quadraticCurveTo(140, 168, 112, 220);
context.quadraticCurveTo(192, 288, 136, 316);
context.quadraticCurveTo(168, 328, 156, 368);
context.quadraticCurveTo(152, 368, 120, 368);
context.lineWidth = 1;
context.fillStyle = 'rgba(255,255,140,1)';
context.fill();
context.closePath();
Etwas vergleichbares wie „Smooth CurveTo“ steht hier nicht zur Verfügung, somit steht meinem nächsten Versuch nur noch „bezierCurveTo()“ zur Verfügung.
Zwei Kurvenverläufe werden übereinander gelegt. Beide haben gleiche Kurvenpunkte und Anfasser/Kontrollpunkte. Sie unterscheiden sich in den Attributwerten „S“ für kubische Bézier-Kurvenform (Shorthand/Smooth CurveTo) /Kurzform/weiche Kurve) - erwartetes Ergebnis - und “Q„ quadratische Bézier-Kurvenform. Sie bleibt eingeblendet, da sie das Pendant zur CanvasAbbildung darstellt.
Startpunkt weißer Kreis (120 368)
<path
d="M 120 368
Q 100 368 104 340
Q 120 320 104 300
Q 60 248 88 220
Q 132 152 132 100
Q 140 168 112 220
Q 192 288 136 316
Q 168 328 156 368
Q 152 368 120 368"
/>
|
<path
d="M 120 368
S 100 368 104 340
S 120 320 104 300
S 60 248 88 220
S 132 152 132 100
S 140 168 112 220
S 192 288 136 316
S 168 328 156 368
S 152 368 120 368"
/>
|
Die Unterscheidung kann ich nicht mathematisch erklären. Da fehlt mir dann doch einiges an Wissen. „S“ für weiche Kurve stellt gefühlt für mich einen zweiten gespiegelt errechneten Kontrollpunkt zur Verfügung, womit sich eine weiche Kurve erklärt. Die quadratische Bézierkurve hat keinen zweiten Kontrollpunkt und wird somit zum Eckpunkt mit weich einlaufender Kurvenform.