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);
Najpierw skalowanie, potem translacja
ctx.scale(1.5, 1.5);
ctx.translate(160,60);
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.