20.10.2019

Canvas — line, рисуем линии

Spread the love
  •  
  •  
  •  
  •  
  •  

В данной статье я напишу как в элементе Canvas рисовать линии. Для того чтобы создать линию мы будем использовать методы moveTo(), lineTo(), и stroke().

Рисование линий (Draw Line)

В результате мы получим:

Метод MoveTo(X,Y) — переместить текущую позицию в новую точку на холсте с координатами X и Y.

Метод LineTo(X,Y) — перемещает текущую позицию в точку X и Y и рисует линию соединяющую обе точки.

Метод stroke() — отображает линию на холсте с заданным цветом, если цвет не задан то по умолчанию он является черным

.

Цвет линий.

Для того чтобы задать цвет линий нужно использовать метод strokeStyle — контекста.

Зададим цвет нашим линиям:

Ширина линий.

Для установки ширины линии используется метод lineWidth() — контекста.

Зададим ширину линии:

Для линий можно задать стиль отображения концов линии.

Можно задать стиль — «butt»,»round» и «square».

Зададим стиль round.

вот в итоге у нас получиться:

Исходный код примера:

0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *