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() может быть очень полезна при рисовании. Предположим, вы хотите нарисовать два объекта, один из которых является переводом другого.

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

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

Примеры

Давайте рассмотрим несколько примеров использования метода 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);
}

Выход:

Простой пример JavaScript translate()

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();

}
Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript