В этом руководстве вы узнаете, как использовать 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(); }