Координаты в canvas

Пространство canvas или растрового холста представляет собой двухмерную сетку.

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

В предыдущей главе вы встречали метод fillRect(0,0,150,75). Если расшифровывать его запись простыми словами, то он означает следующее: начните в верхнем левом углу (0,0) и нарисуйте прямоугольник размером 150x75 пикселей.

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

Наведите мышь на прямоугольник ниже, чтобы увидеть координаты X и Y данной точки:

X
Y

Рисуем линию

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

  • moveTo(x,y) — определяет начальную точку линии
  • lineTo(x,y) — определяет конечную точку линии

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

Пример:

Ваш браузер не поддерживает HTML5 тег canvas.

Определяем стартовую точку по координатам (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();

Рисуем круг

Чтобы нарисовать круг в элементе <canvas>, используются следующие методы:

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

Пример:

Ваш браузер не поддерживает HTML5 тег canvas.

Определяем круг при помощи метода 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();