Skalowanie – elipsa

Elipsę możemy uzyskać przez skalowanie koła, ale prawidłowe dobranie
położenia elipsy może sprawiać trudność. Dlatego utworzyliśmy funkcję
drawEllipse, w której podajemy parametry x, y, w,
h, czyli położenie lewego górnego rogu prostokąta obejmującego
elipsę oraz szerokość i wysokość elipsy.

A oto nasza funkcja:

Listing

	function drawEllipse(context, x, y, w, h) {
	  var s = h / w;
	  context.save();
	  context.beginPath();
	  context.translate(0, y - y * s);
	  context.scale(1, s);
	  context.arc(x + w / 2, y + w / 2, w / 2, 0, 2 * Math.PI, false);
	  context.restore();
	};	
	

Zmianie uległa długość odcinka y. Ponieważ translację wykonaliśmy przed skalowaniem
musieliśmy skrócić odcinek y. Gdyby translacja była wykonywana po skalowaniu, odcinek
y musielibyśmy powiększyć.

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

W dalszym ciągu poznamy inne sposoby utworzenia i narysowania elipsy.

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	drawEllipse(ctx, 10, 10, 200, 75);
	ctx.fillStyle = 'lightblue';
	ctx.fill();
	ctx.lineWidth = 3;
	ctx.strokeStyle = 'black';
	ctx.stroke();	
	

Dodaj komentarz

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