Canvas. Рисуем линию

Рисуем линию

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

  • Передвинуть перо
  • Указать координаты куда будет проведена линия. В качестве отсчета берется точка, где находится перо
  • Обвести нарисованное

Линия рисуется командой lineTo(x,y) — где x,y координаты точки куда линия будет проведена. Рассмотрим пример:

See the Pen LineTo in Canvas by Alex (@Asmodey) on CodePen.

Думаю довольно понятно? Тогда давайте усложним задачу: будем рисовать линию по клику. При каждом клике мышью будем проводить линию в ту точку, в которую кликнул курсор. Возникает вопрос первого клика? Давайте считать, что начало отсчета — точка с координатами 0,0. Смотрим пример:

See the Pen Рисование линии по клику by Alex (@Asmodey) on CodePen.

Выполнить

Задание 1. Добавьте в предыдущий пример кнопку, которая будет очищать вывод в Canvas. Смотри функцию clearRect()

Попробуем усложнить задачу. Пусть в предыдущем примере событие будет срабатывать на каждое движение мышью. Код будет выглядеть:

See the Pen Рисование линии по onmousemove by Alex (@Asmodey) on CodePen.

Выполнить

Задание 2. Модифицируйте задачу таким образом, чтобы рисование происходило при удержании клавиши мыши, при каждом движении мышью.

Задание 3. Предусмотрите возможность выбора цвета линии.

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

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