Kwadratowa krzywa Béziera (HTML5 canvas)

Kwadratowa krzywa Béziera

Aby narysować kwadratową krzywą Béziera musimy podać współrzędne trzech punktów:

• współrzędne punktu początkowego krzywej
• współrzędne punktu kontrolnego
• współrzędne punktu końcowego krzywej

A oto krzywa rozciągająca się między punktami (140,200), (340, 200) z punktem kontrolnym w pozycji (240,10).

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.quadraticCurveTo(240, 10, 340, 200);
	ctx.lineWidth = 2;
	ctx.strokeStyle = 'blue';
	ctx.stroke();
	ctx.beginPath();
	fillStyle="blue";
	ctx.arc(140, 200, 3, 2*Math.PI, 0, false);
	ctx.fill();
	ctx.beginPath();
	fillStyle="blue";
	ctx.arc(340, 200, 3, 2*Math.PI, 0, false);
	ctx.fill();
	ctx.beginPath();
	ctx.fillStyle="red";
	ctx.arc(240, 10, 3, 2*Math.PI, 0, false);
	ctx.fill();