Skalowanie – Sposób 2

Ustawiamy skalowanie przy użyciu setTransform(sx,0,0,sy,0,0). Macierz
jest zerowana, a następnie ustawiana na podaną transformację.

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

Kolejność wykonania translacji i skalowania nie jest obojętna.
Operację setTransform() musimy wykonać jako pierwszą, gdyż
ta funkcja, zerując macierz, anuluje poprzednie operacje.

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.setTransform(1.5,0,0,1.5,0,0);
	ctx.translate(160, 60);		
	drawRectangle(ctx);			
	

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

Dodaj komentarz

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