Odbicie względem prostej nie przechodzącej przez punkt (0,0) (HTML5 canvas)

Odbicie względem prostej nie przechodzącej przez punkt (0,0)

Użyty został skrypt transform.js.

Przypadek 1

Prosta jest równoległa do osi Y i nie może być przedstawiona równaniem y=mx+b

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(200,10);
	ctx.lineTo(200,240);
	ctx.strokeStyle = "black";
	ctx.stroke();
	var leftX = 220;
	var topY = 20;
	var width = 100;
	var height = 75;
	var cornerRadius = 15;
	drawRectangle(ctx);
	

Wykonujemy kolejne kroki

dokonujemy translacji o odległość prostej od osi Y

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

Listing

	var cv = document.getElementById("canvas1");
	var ctx = cv.getContext("2d");
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(200,10);
	ctx.lineTo(200,240);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.restore();
	var leftX = 220;
	var topY = 20;
	var width = 100;
	var height = 75;
	var cornerRadius = 15;
	ctx.translate(-200,0);
	drawRectangle(ctx);
	

wykonujemy odbicie figury względem osi Y

Figury chwilowo nie widzimy

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

Listing

	var cv = document.getElementById("canvas2");
	var ctx = cv.getContext("2d");
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(200,10);
	ctx.lineTo(200,240);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.restore()
	var leftX = 220;
	var topY = 20;
	var width = 100;
	var height = 75;
	var cornerRadius = 15;
	ctx.scale(-1,1);
	ctx.translate(-200,0);
	drawRectangle(ctx);

wykonujemy translację powrotną

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

	var cv = document.getElementById("canvas3");
	var ctx = cv.getContext("2d");
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(200,10);
	ctx.lineTo(200,240);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.restore();
	var leftX = 220;
	var topY = 20;
	var width = 100;
	var height = 75;
	var cornerRadius = 15;
	ctx.translate(200,0);
	ctx.scale(-1,1);
	ctx.translate(-200,0);
	drawRectangle(ctx);