HTML5. Урок #14. Трансформации холста

by @html_books
HTML5. Урок #14. Трансформации холста

Работаем дальше с холстом

Элемент canvas можно трансформировать. В качестве примера мы написали некоторый текст на холсте в позиции (20, 10).

ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);

Результат:

Метод translate(x,y) используется для перемещения холста. х указывает, как далеко нужно переместить сетку по горизонтали, а у — как далеко нужно переместить сетку по вертикали.

ctx.translate(100, 150);
ctx.fillText("after translate", 10, 30);

В этом примере холст перемещается на 100 пикселей вправо и на 150 пикселей вниз. Результат:

Метод rotate()

Метод rotate() используется для вращения холста в HTML5. Параметр задаётся в радианах, а не градусах. В примере внизу показан один и тот же прямоугольник до и после применения вращения:

ctx.fillStyle = "#FF0000";
ctx.fillRect(10,10, 100, 100);

ctx.rotate( (Math.PI / 180) * 25); //поворот на 25 градусов.

ctx.fillStyle = "#0000FF";
ctx.fillRect(10,10, 100, 100);

Результат:

Метод scale()

Метод scale() масштабирует текущий рисунок. Требует два параметра: - во сколько раз изображение должно быть масштабировано вдоль оси X - во сколько раз изображение должно быть масштабировано вдоль оси Y

var canvas = document.getElementById('canvas1');
ctx =canvas.getContext('2d');
ctx.font="bold 22px Tahoma";
ctx.textAlign="start";
ctx.fillText("start", 10, 30);
ctx.translate(100, 150);
ctx.fillText("after translate", 0, 0);
ctx.rotate(1);
ctx.fillText("after rotate", 0, 0);
ctx.scale(1.5, 4);
ctx.fillText("after scale", 0,20);

В результате холст будет масштабирован в 1,5 раза вдоль оси X и в 4 раза вдоль оси Y:

June 20, 2018
by @html_books