Координаты HTML Canvas

Координаты холста

HTML-холст представляет собой двумерную сетку.

Координаты верхнего левого угла холста (0,0).

В предыдущей главе мы использовали метод: fillRect(0,0,150,75).

Это означает: начните рисовать прямоугольник с верхнего левого угла (0,0) и размером 150x75 пикселей.

Пример координат

Наведите мышь на следующий прямоугольник, чтобы увидеть его координаты x и y:

Нарисовать линию

Чтобы нарисовать прямую на холсте, используйте следующие методы:

• moveTo(x,y) - определить начало линии
• lineTo(x,y) - определить конец линии

Чтобы нарисовать линию, вам нужно использовать один из методов "палитры", например, stroke().

Пример

Определите точку начала в позиции (0,0), а точку конца в позиции (200,100). Затем используйте метод stroke() для фактического рисования линии:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

亲自试一试

Нарисовать круг

Чтобы нарисовать круг на холсте, используйте следующие методы:

• beginPath() - начать путь
• arc(x,y,r,startangle,endangle) - создание дуги/кривой

Чтобы создать круг с помощью метода arc(): установите начальный угол в 0, а конечный угол в 2 * Math.PI. Параметры x и y определяют координаты центра круга. Параметр r определяет半径 круга.

Пример

Используя метод arc() определяем круг. Затем используем метод stroke() для фактического рисования круга:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

亲自试一试

ctx.stroke();

Попробуйте сами