Sześcienna krzywa Béziera (HTML5 canvas)

Sześcienna krzywa Béziera

Aby narysować sześcienną krzywą Béziera musimy podać współrzędne czterech punktów:

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

A oto krzywa rozciągająca się między punktami (140,200), (340, 200) z punktami kontrolnym w pozycji (140,30) i (350,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.bezierCurveTo(140, 30, 350, 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(140, 30, 3, 2*Math.PI, 0, false);
	ctx.fill();
	ctx.beginPath();
	ctx.fillStyle="red";
	ctx.arc(350, 10, 3, 2*Math.PI, 0, false);
	ctx.fill();