Холст Координаты
HTML холст представляет собой двумерную сетку.
В верхнем левом углу холста имеет координаты (0,0)
В предыдущей главе, вы видели этот метод используется: fillRect(0,0,150,75) .
Это означает: Начало в верхнем левом углу (0,0) и нарисуйте прямоугольник 150x75 пикселей.
Координаты Пример
Наведите курсор мыши на прямоугольнике ниже, чтобы увидеть ее координаты х и у:
Нарисовать линию
Чтобы нарисовать прямую линию на холсте, используйте следующие методы:
- moveTo( x,y ) - определяет начальную точку линии
- lineTo( x,y ) - определяет конечную точку линии
Для того, чтобы на самом деле нарисовать линию, вы должны использовать один из "ink" методов, как 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. Х и у параметра определяют х- и у-координаты центра окружности. Параметр г определяет радиус окружности.
пример
Определить круг с 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(); Попробуй сам "