Координаты холста HTML
Координаты холста
Холст 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(), чтобы нарисовать линию:
var canvas = document.getElementById("myCanvas");
var 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 определяют координаты x и y центра круга. Параметр r определяет радиус окружности.
Пример
Определите круг с помощью метода arc(). Затем используйте метод stroke(), чтобы нарисовать круг:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();