HTML5 canvas – skalowanie (1)

Skalowanie – Sposób 1

Używamy funkcji scale(sx,sy). sx – oznacza współczynnik
skalowania w poziomie, sy – oznacza współczynnik skalowania w pionie.
Ta tranformacja jest złożeniem aktualnej macierzy przekształceń i
żądanego przez programistę skalowania.

Żeby zobaczyć skalowaną figurę trzeba dokonać translacji.

Kolejność wykonania translacji i skalowania nie jest obojętna.

Najpierw translacja, potem skalowanie

ctx.translate(160,60);
ctx.scale(1.5, 1.5);
Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Najpierw skalowanie, potem translacja

ctx.scale(1.5, 1.5);
ctx.translate(160,60);

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");
	var leftX = 10;
	var topY = 10;
	var width = 150;
	var height = 100;
	var cornerRadius = 15;
	drawRectangle(ctx);
	ctx.translate(160,60);
	ctx.scale(1.5, 1.5);	
	drawRectangle(ctx);
	var cv1 = document.getElementById("canvas1");
	var ctx1 = cv1.getContext("2d");
	drawRectangle(ctx1);		
	ctx1.scale(1.5, 1.5);
	ctx1.translate(160,60);
	drawRectangle(ctx1);	
	

Metoda drawRectangle pochodzi ze skryptu transform.js.
Wszystkie skrypty są dostępne tutaj.