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.

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

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();	
	

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *