Возможности JS не ограничиваются работой с текстом и графикой, в этой главе мы рассмотрим возможности работы с графикой. Мы будем использовать элемент canvas, который по своему назначению похож на чистый лист бумаги. Вы можете рисовать на этом холсте все что угодно: чертить линии, контуры, вводить текст — пределы есть только в вашем воображении. Создадим HTML документ
Давайте попробуем нарисовать на холсте при помощи JS — прямоугольник.
Получится маленький черный квадрат в верхнем левом углу браузера.
Что же все таки мы сделали: document.getElementById(«canvas») = возвращает элемент с названием canvas в структуру DOM. var canvas — сохраним его значение в переменной. Теперь нужно получить контекст рисования для элемента canvas. Контекст рисования — это JS объект, обладающий методами и свойствами, при помощи которых можно нарисовать на холсте. 2d — говорит о том, что мы будем рисовать двухмерное изображение. Наконец в последней строке мы рисуем квадрат, вызывая метод контекста рисования fillRect, который принимает четыре аргумента: это, в порядке очередности x,y — координаты верхнего левого угла и координаты правого нижнего угла.
Получается следующая картинка:
Задание: попробуйте нарисовать человечка, дом, автомобиль, корабль, что угодно…
Изменить цвет,
Изменить цвет можно при помощи метода ctx.fillStyle
Только границы геометрической фигуры.
Метод ctx.strokeRect
Обратите внимание на код и на результат его выполнения, вас ничего не смущает?
Метод stroke.Rect принимает такие же значения, что и fillRect. Изменить цвет контура можно при помощи свойства strokeStyle, а чтобы задать толщину линии, нужно свойство lineWidth.
Рисование линий и путей.
Путем называется последовательность линий на «холсте», для этого необходимо задать координаты точки начало отрезка и его конца.
Чтобы залить нарисованный контур цветом, нужно сделать следующее: нарисовать фигуру, которая имеет замкнутые контуры, указать цвет в ctx.fillStyle.
Устанавливаем зеленый цвет при помощи ctx.fillStyle=»Green». Используя метод ctx.lineTo передвигаем перо по координатам нашей фигуры. В самом конце добавляем ctx.fill (закрашиваем фигуру).
Рисование дуг и окружностей.
Кроме прямых линий на «холсте» можно рисовать дуги и окружности — для этого предназначен метод arc. Чтобы изобразить окружность, нужно задать её центр и радиус (расстояние от центра до контура), а так же указать, какую часть окружности нужно нарисовать, задав начальный и конечный угол. Начальный и конечный углы измеряются в радианах. Полная окружность начинается с угла 0 (от ее правого края) и продолжается до угла pi*2 радиан.
Код будет выглядеть вот так
Рисование нескольких окружностей с помощью функции.
Функция circle уже содержит необходимы для задания окружности элементы.
Задание
- Создайте на основе последнего кода функцию, рисующую снеговика drawSnowman.
- Напишите функцию, которая соединяет точки, заданные массивом. var points = [[50,50], [50,100], [100,100], [100,50], [50,100]];
- С помощью Jquery и события mousemove напишите код, рисующий окружность радиусом в 3 пикселя под курсором мышки каждый раз, когда вы передвигаете мышку.