Transformacja krzywych Béziera
W canvas transformowane są cały kontekst lub ścieżka. Z matematycznego punktu widzenia wystarczy transformacja każdego z trzech lub czterech punktów krzywej i ponowne jej odrysowanie przy uwzględnieniu nowych współrzędnych!
A oto krzywa rozciągająca się między punktami (140,200), (340, 200) z punktami kontrolnym w pozycji (140,30) i (350,10), a następnie transformowana o 90° z zastosowaniem odpowiedniej translacji.
Listing
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
ctx.beginPath();
ctx.moveTo(140, 200);
ctx.bezierCurveTo(140, 30, 350, 10, 340, 200);
ctx.lineWidth = 2;
ctx.strokeStyle = 'blue';
ctx.stroke();
ctx.translate(300, 80);
ctx.rotate(Math.PI / 2);
ctx.beginPath();
ctx.moveTo(140, 200);
ctx.bezierCurveTo(140, 30, 350, 10, 340, 200);
ctx.lineWidth = 2;
ctx.strokeStyle = 'blue';
ctx.stroke();