Координаты Canvas

Элемент HTML canvas — это мощный инструмент в HTML5, позволяющий создавать и манипулировать графикой на веб-странице с помощью JavaScript. Элемент canvas предоставляет двумерную поверхность для рисования, которую можно представить как сетку или систему координат, где верхний левый угол имеет координаты (0,0). Ось X увеличивается горизонтально вправо, а ось Y увеличивается вертикально вниз. Каждая точка на canvas представлена парой координат (x, y), определяющей её положение в сетке.

Рисование линии

Для рисования прямой линии на canvas используются следующие методы:

moveTo(x,y), задающая начальную точку линии
lineTo(x,y), задающая конечную точку линии

Для отрисовки линии используйте один из методов «чернил», например, stroke().

Пример элемента HTML `<canvas>` для рисования линии:

Пример элемента HTML <canvas> для рисования линии

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById("canvasExample");
      var ctx = c.getContext("2d");
      // Starting point (0,0) is the top-left corner
      ctx.moveTo(0, 0);
      // Ending point (300,150) matches the canvas width and height
      ctx.lineTo(300, 150);
      ctx.strokeStyle = '#359900';
      ctx.stroke();
    </script>
  </body>
</html>

Try it Yourself »

В приведенном выше примере мы задали начальную и конечную точки линии и использовали метод stroke() для её отрисовки.

Рисование окружности

Для рисования окружности на canvas используются следующие методы:

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

Пример элемента HTML `<canvas>` для рисования окружности:

Пример элемента HTML <canvas> для рисования окружности:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="200" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.beginPath();
      // Center at (125, 95), radius 70. 125 is half of the 250 width.
      ctx.arc(125, 95, 70, 0, 2 * Math.PI);
      ctx.strokeStyle = '#1c87c9';
      ctx.closePath();
      ctx.stroke();
    </script>
  </body>
</html>

Try it Yourself »

В приведенном выше примере мы задали окружность с помощью метода arc() и использовали метод stroke() для её отрисовки.

Практика

Каковы особенности координат элемента HTML5 <canvas>?

Это двумерная система координат.Левый верхний угол canvas соответствует координатам (0, 0).Значение x (горизонтальное) увеличивается при движении влево.Значение y (вертикальное) увеличивается при движении вниз.Это трёхмерная система координат.

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

Рисование линии ​

Пример элемента HTML <canvas> для рисования линии: ​

Рисование окружности ​