Заметки по изучению холста: рисование простых путей

Общие шаги по рисованию отрезков линий:

moveTo(x,y) перемещает кисть в указанную точку координат (x,y)

lineTo(x,y) использует прямую линию для соединения текущей конечной точки и указанной точки координат (x,y)

Stroke() рисует текущий или существующий путь в соответствии с текущим стилем рисования линий.

Общие шаги по рисованию прямоугольного пути:

rect(x, y, width, height) прямоугольный путь, координата точки (x, y), ширина-высота

Stroke() или fill рисует или заполняет контур в соответствии с текущим стилем.

Вы также можете использовать StrokeRect или fillRect, упомянутые выше, или объединить их в прямоугольник с помощью lineTo.

Давайте сначала посмотрим на API для рисования дуг:

ctx.arc(x, y, radius, startAngle, endAngle, против часовой стрелки);

Центр дуги x, y, радиус Радиус дуги, начальная точка startAngle, конечная точка дуги endAngle, против часовой стрелки, по умолчанию по часовой стрелке, истинно против часовой стрелки

Все повороты в CSS используют углы (градусы), но единицей измерения углов в функции дуги являются радианы, а не углы. JS-выражения углов и радиан: радианы = (Math.PI/180) * угол (градусы).

Радиан здесь по умолчанию рассчитывается на основе положительного направления оси X и угла поворота по часовой стрелке.

Иллюстрация:

(картинка из пустыни)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI/2, false);ctx.closePath();ctx.stroke();ctx.fill();

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.