Canvas API: трансформация с методом translate() в JavaScript

В этом руководстве вы узнаете, как использовать API-интерфейс JavaScript translate() для перемещения (трансформации) исходной точки холста в новое положение.

translate() — это метод контекста 2D-рисования. Метод translate(x,y) перемещает холст и его исходную точку на x единиц по горизонтали и на y единиц по вертикали.

Синтаксис:

ctx.translate(x, y);

В этом синтаксисе:

• x представляет собой расстояние, на которое вы хотите переместить начало холста в горизонтальном направлении. Начало координат перемещается влево, если x положительное, и вправо, если x отрицательное.
• y представляет собой расстояние, на которое вы хотите переместить начало холста в вертикальном направлении. Начало координат перемещается вниз, если y положительное значение, и вверх, если y отрицательное.

По умолчанию начало холста (0,0) находится в левом верхнем углу экрана. При добавлении преобразования перемещения вся система координат перемещается так, что ее новое начало находится в точке(x, y):

Функция translate() может быть очень полезна при рисовании. Предположим, вы хотите нарисовать два объекта, один из которых является переводом другого.

Для этого вы можете нарисовать первый объект, применить трансформацию перевода и нарисовать второй объект.

Если вы не применяете преобразование перемещения, вам необходимо вычислить новые координаты для второго объекта.

Примеры

Давайте рассмотрим несколько примеров использования метода JavaScript translate().

1) Простой пример

В следующем примере рисуется квадрат в точке (100,100) и второй квадрат в точке (150,150). Он вызывает метод translate() для перемещения исходной точки холста в (150, 150) для рисования второго квадрата.

HTML

 <canvas id="canvas" height="300" width="500">
</canvas>

JavaScript

const canvas = document.querySelector('#canvas');

if (canvas.getContext) {

    const ctx = canvas.getContext('2d');
    // draw the first square
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 100, 50, 50);

    // translate
    ctx.translate(150, 150);

    // draw the second square
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, 50, 50);
}

Выход:

2) Рисование часов

В следующем примере в центре холста рисуются часы. Чтобы упростить рисование часовой и минутной стрелок, метод translate() переводит начало холста в центр часов.

HTML

<canvas id="canvas" height="300" width="500">
</canvas>

JavaScript

const canvas = document.querySelector('#canvas');

if (canvas.getContext) {

    const ctx = canvas.getContext('2d');

    ctx.beginPath();

    const centerX = canvas.width / 2,
    centerY = canvas.height / 2;

    // draw the circle
    ctx.arc(centerX, centerY, 70, 0, 2 * Math.PI, false);

    // translate to center
    ctx.translate(centerX, centerY);

    // draw the hour hand
    ctx.moveTo(0, 0);
    ctx.lineTo( - 30, -20);

    // draw the minute hand
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -55);

    ctx.stroke();

}