Kwadratowa krzywa Béziera

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

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

Dodaj komentarz

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