Sześcienna krzywa Béziera

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

  • wspoł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();	
	

Dodaj komentarz

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