Как нарисовать домик в html. Введение в Canvas

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

Холст является незапоминаемой (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

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

What You"ll Be Creating

В ранних уроках мы описывали . В этом уроке я покажу как использовать JavaScript и HTML5 чтобы отобразить графически данные используя графики.

Простой способ создать графики используя код, к примеру используя полную библиотеку графиков из CodeCanyon.

Инфографика библиотеки графиков из CodeCanyon

Но если вы хотите знать что нужно для того чтобы создать библиотеку как эту, этот урок для вас.

Что такое линейная диаграмма?

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

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

Существует много типов линейных графиков:

• горизонтальный и вертикальный графики, в зависимости от ориентации
• сложенные гистограммы или классические графики для представления многократной серии данных
• гистограммы 2В или 3D
• прочие

Какие компоненты у гистограмм?

Давайте посмотрим на компоненты, которые составляют гистограмму независимо от ее типа:

• Данные диаграммы: это наборы чисел и связанных категорий, которые представлены диаграммой.
• Название серии данных (1)
• Диаграмма графика (2): справочная система представлена так, чтобы визуальное восприятие могло быть понятным.
• Гистограмма (3): цветные прямоугольники с размерами, соответствующие данным.
• Описание диаграммы (4): Показывает описание каждого цвета прямоугольника и соответствующему ему значение.

Теперь мы знаем компоненты гистограммы, а теперь посмотрим, как мы сможем написать код JavaScript для прорисовки диаграммы вроде этой.

Рисуем диаграмму используя JavaScript Настраиваем проект JavaScript

Для старта прорисовки с использованием JavaScript и HTML5 мы нужно настроить проект вот так:

• Создать папку для файлов проекта и назовём её bar-chart-tutorial .
• В папке проекта создайте файл и назовите его index.html . Он будет содержать наш HTML-код
• Также в папку проекта добавим ещё одни файл с названием script.js . В нём будет содержаться код JavaScript для прорисовки диаграммы.

Мы будем выполнять всё очень просто и добавим следующий код во внутрь index.html:

У нас есть элемент с id myCanvas , поэтому мы можем ссылаться на него в нашем коде JavaScript. Тогда мы загрузим наш скрипт с помощью тега .

Добавьте следующий код в файл script.js:

Var myCanvas = document.getElementById("myCanvas"); myCanvas.width = 300; myCanvas.height = 300; var ctx = myCanvas.getContext("2d");

Добавляем несколько вспомогательных функций

Рисование гистограммы требует только знания, как потянуть два элемента:

• рисование линии: для рисования линий в сетке
• рисование цветного прямоугольника: для рисования гистограммы

Создадим вспомогательную функцию для этих двух элементов. Мы добавим функцию в наш файл script.js .

Function drawLine(ctx, startX, startY, endX, endY,color){ ctx.save(); ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(startX,startY); ctx.lineTo(endX,endY); ctx.stroke(); ctx.restore(); }

Функция drawLine предлагает шесть параметров:

startX: координата X стартовой точки линии

startY: координата Y стартовой точки линии

endX: координата X конечной точки линии

endY: координата Y конечной точки линии

color: цвет линии

Мы модифицируем настройки цвета для strokeStyle . Это определит цвета, которые будут использоваться в прорисовке линии. Мы используем ctx.save() и ctx.restore() , поэтому мы не затронем цвета, использующиеся за пределами этой функции.

Мы нарисуем линию с названием beginPath() . Это проинформирует нарисованному контексту, что мы начали рисовать что-то новое на странице. Мы используем moveTo() для выбора стартовой точки, с названием lineTo() для указания конечной точки и тогда сделать актуальную прорисовку под названием stroke() .

Другая дополнительная функция нужна нам для прорисовки диаграммы, которая является цветным прямоугольником. Добавим его в script.js:

Function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){ ctx.save(); ctx.fillStyle=color; ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height); ctx.restore(); }

Функция drawBar предлагает шесть параметров:

ctx: ссылается на нарисованный контекст

upperLeftCornerX: координата X диаграммы верхнего левого угла

upperLeftCornerY: координата X диаграммы верхнего левого угла

width: ширина диаграммы

height: высота диаграммы

color: цвет диаграммы

Информационная модель гистограммы

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

• Классическая музыка: 10
• Альтернативный рок: 14
• Поп: 2
• Джаз: 12

Мы можем изобразить это в JavaScript в форме объекта. Давайте добавим это в файл script.js:

Var myVinyls = { "Classical music": 10, "Alternative rock": 14, "Pop": 2, "Jazz": 12 };

Реализуем компонент гистограммы

Давайте реализуем компонент, который делает актуальную прорисовку нашей гистограммы. Мы сделаем это через добавление объекта JavaScript в наш script.js:

Var Barchart = function(options){ this.options = options; this.canvas = options.canvas; this.ctx = this.canvas.getContext("2d"); this.colors = options.colors; this.draw = function(){ var maxValue = 0; for (var categ in this.options.data){ maxValue = Math.max(maxValue,this.options.data); } var canvasActualHeight = this.canvas.height - this.options.padding * 2; var canvasActualWidth = this.canvas.width - this.options.padding * 2; //drawing the grid lines var gridValue = 0; while (gridValue