Интерактивные фигуры

Холст является незапоминаемой (non-retained) поверхностью рисования. Это означает, что холст не отслеживает выполняемые на нем операции рисования, он фиксирует лишь конечный результат этих операций - набор разноцветных пикселей, составляющих его содержимое.

Например, если нарисовать красный квадрат в центре холста методом stroke() или fill(), как только завершится выполнение этого метода, квадрат станет ничем иным, как блоком красных пикселов. Он может казаться вам квадратом, но холст не обладает информацией об этом.

Такой подход позволяет сделать процесс рисования быстрым, но он также усложняет задачу создания интерактивной графики. Допустим, что нам нужно разработать более интеллектуальную версию программы рисования, которую мы рассмотрели в статье "Создание простой программы рисования" . В частности, мы хотим, чтобы кроме линий в ней также можно было бы рисовать прямоугольники. (Но это еще легко!)

Более того, мы хотим не только рисовать прямоугольники, но также и выбирать нарисованные прямоугольники, перетаскивать их на новое место, изменять их размеры, цвет и т.п. Но для того чтобы реализовать все эти возможности, нам нужно решить несколько проблем. Прежде всего, как нам узнать, что пользователь щелкнул на прямоугольнике? Потом, как нам узнать все подробности о данном прямоугольнике - его координаты, размер, цвет контура и заполнения? Наконец, как нам выяснить подробности обо всех прочих фигурах на холсте? Что нам необходимо знать, если мы хотим изменить прямоугольник и обновить холст?

Чтобы решить все эти проблемы и сделать холст интерактивным, нам нужно отслеживать все рисуемые на нем объекты. Потом, когда пользователь щелкнет в какой-либо точке холста, нужно определить, не попал ли он по одной из фигур. Этот процесс называется проверкой попадания (hit testing) . Если мы можем решить эти две задачи, решение остальных - модифицирование фигуры и обновление холста соответствующим образом - будет легким.

Отслеживание нарисованного содержимого

Для того чтобы изменять и обновлять содержимое холста, нам необходимо иметь всю информацию об этом содержимом. Возьмем, например, интерактивную программу для рисования кругов, окно которой показано на рисунке:

Для простоты, программа рисует только отдельные круги разного размера и цвета. Чтобы отслеживать отдельный круг, нам нужно знать его позицию на холсте (т.е. координаты центра), радиус и цвет заливки. Вместо того чтобы создавать несколько десятков переменных для хранения всей этой информации, нужно хранить четыре типа данных в одном компактном пакете. Таким пакетом будет пользовательский объект (custom object) .

Рассмотрим создание пользовательского объекта на случай, если вам никогда раньше не приходилось выполнять эту стандартную процедуру. Сначала создается функция с названием, отображающим тип нашего объекта. Например, функцию для создания пользовательского объекта для рисования круга можно назвать Circle():

Function Circle() { }

Мы хотим, чтобы наш объект мог хранить данные. Это делается посредством создания свойств с помощью ключевого слова this. Например, чтобы определить свойство radius объекта круга, присваивается значение выражению this.radius.

Можно пойти далее и передавать параметры функции Circle(). Таким образом создание объекта круга и установка его свойств осуществляется в одном шаге. В следующем коде приводится пример функции Circle(), позволяющей устанавливать параметры:

// Пользовательский объект Circle function Circle(x, y, radius, color) { this.x = x; this.y = y; this.radius = radius; this.color = color; this.isSelected = false; }

Свойство isSelected принимает значения true или false. Когда пользователь щелкает на круге, свойству isSelected присваивается значение true, вследствие чего код рисования знает, что у данного круга нужно нарисовать другой контур.

Объект круга с помощью этой версии функции Circle() можно создать посредством такого кода:

Var myCircle = new Circle(0, 0, 20, "red");

Вся идея создания программы рисования кругов заключается в том, чтобы можно было рисовать не один круг, а сколько угодно. Это означает, что только одного объекта круга будет недостаточно, и нам нужно создать массив для хранения всех кругов. В данном примере эту задачу выполняет следующая глобальная переменная:

// Этот массив хранит все окружности на холсте var circles = ;

Оставшийся код не представляет ничего сложного. Когда пользователь наживает кнопку "Добавить круг", чтобы создать новый круг, вызывается функция addRandomCircle(), которая создает новый круг произвольного размера и цвета в произвольном месте холста:

Function addRandomCircle() { // Устанавливаем произвольный размер и позицию круга var radius = randomFromTo(10, 60); var x = randomFromTo(0, canvas.width); var y = randomFromTo(0, canvas.height); // Окрашиваем круг произвольным цветом var colors = ["green", "blue", "red", "yellow", "magenta", "orange", "brown", "purple", "pink"]; var color = colors; // Создаем новый круг var circle = new Circle(x, y, radius, color); // Сохраняем его в массиве circles.push(circle); // Обновляем отображение круга drawCircles(); }

В коде применяется пользовательская функция randomFromTo(), которая генерирует произвольные числа в заданном диапазоне:

Function randomFromTo(from, to) { return Math.floor(Math.random() * (to - from + 1) + from); }

Последним шагом в этой последовательности будет собственно прорисовка текущей коллекции кругов на холсте. Для этого после создания нового круга функция addRandomCircle() вызывает функцию drawCircles(), которая в свою очередь перебирает массив кругов с помощью следующего кода:

Function drawCircles() { // Очистить холст context.clearRect(0, 0, canvas.width, canvas.height); // Перебираем все круги for(var i=0; i=0; i--) { var circle = circles[i]; // С помощью теоремы Пифагора вычисляем расстояние от // точки, в которой щелкнули, до центра текущего круга var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)) // Определяем, находится ли точка, в которой щелкнули, в данном круге if (distanceFromCenter

Этот пример можно улучшить множеством разнообразных способов и сделать его более интеллектуальным. Например, можно добавить панель инструментов с командами для редактирования выбранного круга, чтобы изменить его цвет или удалить с холста. Или же можно добавить возможность перетаскивания выбранного круга с одного места холста в другое. Для этого нужно просто отслеживать холст на событие onMouseMove, изменить соответствующим образом координаты круга, а потом вызвать функцию drawCircles(), чтобы обновить холст с кругом в новом месте:

Window.onload = function() { // Определение контекста рисования canvas = document.getElementById("drawingCanvas"); context = canvas.getContext("2d"); canvas.onmousedown = canvasClick; canvas.onmouseup = stopDragging; canvas.onmouseout = stopDragging; canvas.onmousemove = dragCircle; } ... function canvasClick(e) { ... if (distanceFromCenter

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

Сегодня я вам расскажу, как работает в html5 canvas? И примеры приведу, хотя бы парочку. Canvas это тег, в котором с помощью javascript можно рисовать различные фигуры. Это одно из нововведений html5 и я вам о нем сейчас немного расскажу.

Подготовка к рисованию

Чтобы начать творить, необходимо создать сам холст, а также связать с ним скрипт.

Указываем холсту размеры, а также идентификатор. Он нужен для того, чтобы связать холст со скриптом, что мы сейчас и сделаем:

var field = document.getElementById("field").getContext("2d");

Запишем в переменную field эту строчку, она позволит рисовать внутри холста с помощью различных методов. Итак, теперь мы можем переходить к попыткам рисования. Для удобства я сделаю фон холста желтым, а не белым, чтобы четко было видно все отступы.

Canvas{ background: yellow; }

Пример 1 — прямоугольник без заливки

Теперь у нас есть переменная field и обращаясь к различным методам можно рисовать внутри контейнера canvas . В первую очередь можно отрегулировать толщину линии, а также ее цвет, это делается с помощью следующих строк:
field.lineWidth = 4;
field.strokeStyle = "#173045";

Отлично, параметры заданы. Теперь нам важно понять, как вообще происходит рисование. Происходит оно по такому принципу: есть координата х , оно начинается в начале холста и движется вправо, а также есть координата y , она также начинается вначале контейнера, но идет вниз. Чтобы вы это осознали лучше, смотрите эту картинку:

И как же происходит рисование прямоугольника? Сначала всегда задается смещение по координате x , а после по у. После задание этого начального положения нужно всего лишь указать ширину и высоту прямоугольника. Сначала ширину, а потом — высоту. Смотрим:
field.strokeRect(80, 90, 120, 70);
Результат:

Здесь первый параметр в скобках это смещение по x, второй — смещение по у, третий — ширина, четвертый — высота. Все, это достаточно запомнить, чтобы рисовать прямоугольники.

Пример 2 — прямоугольник с заливкой

Делается в этом случае все таким же образом, изменяется только название метода:
field.fillStyle = "#173045";
field.fillRect(50, 50, 130, 85);
Метод fillStyle позволяет определить цвет заливки. Я пока удалил прошлый наш прямоугольник, новый выглядит так:


Как видите, все 4 параметра задаются в той же последовательности. Если обнулить первые два значения, то прямоугольник будет нарисован в верхнем левом углу холста.

Пример 3 — линия и сложные фигуры

Как вы понимаете, описанные выше методы не годятся для создания сложных фигур. Давайте нарисуем на canvas треугольник. Это не так сложно, как могло бы показаться на первый взгляд.
Метод beginPath() нужен для того, чтобы показать начало рисования произвольной фигуры. Метод moveTo() устанавливает начальную координату для рисования. Как вы понимаете, у него два параметра — координаты по x и y. Значит, чтобы подготовиться к рисованию сложной фигуры нужны такие строчки кода:
field.beginPath();
field.moveTo(30, 30);

Для примера я начну рисовать треугольник из точки в 30 пикселях справа и снизу от левого верхнего угла холста. Рисование происходит с помощью линий, метод lineTo() :

Field.beginPath(); field.moveTo(30, 30); field.lineTo(150, 100); field.lineTo(250, 30); field.closePath(); field.lineWidth = 3; field.strokeStyle = "silver" field.stroke();

Тут я нагородил много кода, но сейчас все объясню, пока смотрите на результат:

Как видим, вполне себе треугольник. Мы прочертили из нашей начальной точки линию в конечную точку, которая находиться в указанных координатах: 150 пикселей от начала холста по оси x, и 100 — от начала по у. Все координаты указывается относительно верхнего левого края холста, а не того места, где закончилась линия. Запомните это, потому что это сразу упрощает понимание и вы уже в голове сможете представить себе результат.

Собственно, метод closePath() завершает рисование фигуры, его указываем после последней нарисованной линии. Остальные параметры:
lineWidth = 3; — толщина линии 3 пикселя;
strokeStyle = "silver"; — цвет линии серебряный;
stroke(); — ВНИМАНИЕ! Без этого метода в конце наши линии не отобразятся и треугольник не будет виден. Поэтому прописываем его обязательно.

Что ж, на этом пока все примеры. Надеюсь, они помогли вам познакомиться с основами рисования в html5. По любым вопросам пишите в комментарии.

Добрый день, уважаемые читатели.

Итак, приступим!

Что такое canvas и зачем он нужен?

Canvаs (холст) - элемент HTML5 для создания растрового двухмерного изображения. Обычно используется совместно с javascript .

Ширину и высоту canvas можно изменять.

Используется в основном для отрисовки графиков и игровый элементов в браузерных играх, вставки видео, создания полноценного плеера.

Canvas так же используется в WebGL для аппаратного ускорения 3D графики. В результате можно создавать даже 3D игры, работающие в окне браузера.

Создание нашего canvas Canvas Текст показывается, если элемент не поддерживается var canvas = document.getElementById("test"); var ctx = canvas.getContext("2d"); /* Рисует контур прямоугольника на всю ширину и высоту canvas */ ctx.strokeRect(0, 0, canvas.width, canvas.height);

Создается canvas путем обычной вставки тега в html-код . Далее через обычный javascript мы получаем элемент и содержимое canvas (строка 10, 11) и рисуем обведенный прямоугольник, который растягивается на всю ширину и высоту canvas .

Примитивы в canvas

В canvas можно рисовать такие геометрические элементы, как:

Прямоугольники

Линии

Окружности, дуги

Различные кривые, эллипс

Прямоугольники

Самая простая фигура для canvas — прямоугольник. Чтобы его нарисовать нам нужна всего одна строчка кода.

StrokeRect(x, y, width, height); // пустой прямоугольник с обводкой

Есть еще 2 варианта для рисования прямоугольников:

FillRect(x, y, width, height) // Закрашенный прямоугольник clearRect(x, y, width, height) // Очищам область на холсте в виде прямоугольника заданного размера

Ниже приведен пример использования этих 2-х способов:

Ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.clearRect(50, 50, 300, 200); // вырезаем прямоугольник

В результате мы нарисовали большой черный прямоугольник и вырезали область из точки (50, 50) размером 300 пикселей по ширине и 200 пикселей по высоте. Ниже представлено, как это будет выглядеть.

Более интересный пример:

Ctx.strokeRect(5, 5, 138, 138); ctx.fillRect(10, 10, 128, 128); for (i = 0; i