Skalowanie – elipsa (HTML5 canvas)

Skalowanie – elipsa

Użyty został Skrypt transform.js.

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();