Возможности 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 уже содержит необходимы для задания окружности элементы.

Задание

1. Создайте на основе последнего кода функцию, рисующую снеговика drawSnowman.
2. Напишите функцию, которая соединяет точки, заданные массивом. var points = [[50,50], [50,100], [100,100], [100,50], [50,100]];
3. С помощью Jquery и события mousemove напишите код, рисующий окружность радиусом в 3 пикселя под курсором мышки каждый раз, когда вы передвигаете мышку.