Последние учебники веб-разработки
 

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


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

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

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

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

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


Координаты Пример

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

Икс
Y

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

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

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

Для того, чтобы на самом деле нарисовать линию, вы должны использовать один из "ink" методов, как stroke() .

пример

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

Определить начальную точку в позиции (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. Х и у параметра определяют х- и у-координаты центра окружности. Параметр г определяет радиус окружности.

пример

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

Определить круг с 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();
Попробуй сам "