Мы можем погрузиться в детали того, как рисовать в canvas. К концу этой статьи, Вы научитесь рисовать прямоугольники, треугольники, линии, дуги и кривые, при условии что Вы хорошо знакомы с основными геометрическими фигурами. Работа с путями весьма важна, когда рисуете объекты на canvas и мы увидим как это может быть сделано.
СеткаПеред тем, как мы начнем рисовать, нам нужно поговорить о сетке canvas или координатной плоскости . Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas с сеткой , накладываемой по умолчанию . Обычно 1 единица на сетке соответствует 1 пикселю на canvas. Начало координат этой сетки расположено в верхнем левом углу в координате ( 0,0) . Все элементы размещены относительно этого начала . Так им образом, положение верхнего левого угла синего квадрата составляет х пикселей слева и у пикселей сверху, на координате (х , у) . Позже в этом уроке мы увидим, как можно перевести начало координат в другое место , вращать сетку и даже масштабировать ее , но сейчас мы будем придерживаться настроек сетки по умолчанию.
Интерактивные фигуры
Холст является незапоминаемой (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
Подводя итоги, можно сказать следующее: отслеживание рисуемых объектов предоставляет разработчику неограниченную гибкость для их редактирования и отображения в дальнейшем.
Canvas - API для рисования, недавно добавленный в HTML и поддерживается большинством браузеров (даже Internet Explorer 9). Canvas позволяет рисовать всё, что вы хотите прямо в браузере без использования плагинов, вроде Flash или Java. Canvas с его обманчиво простым API может революционно преобразовать создание веб-приложений для всех устройств, а не только десктопных.
Эти скриншоты позволят вам почувствовать вкус возможностей Canvas.
Canvas - API для двумерного рисования. По сути браузер даёт вам прямоугольную область на экране, в которой вы можете рисовать линии, фигуры, изображения, текст, практически всё что хотите. Canvas первоначально был создан Apple для их виджетов, но с тех пор был принят всеми разработчиками основных браузеров и теперь Canvas является частью спецификации HTML5. Вот небольшой пример, как выглядит некоторый код Canvas:
var canvas = document.getElementById("canvas"); var c = canvas.getContext("2d"); c.fillStyle = "red"; c.fillRect(100,100,400,300);
Данный прямоугольник нарисован функцией context.fillRect() .
Важно понимать, что Canvas предназначен для рисования пикселями. В нём нет фигур или векторов. Нет объектов для связывания с обработчиками событий. Это просто рисунки пикселями на экране. Как мы ещё увидим в этом и сила и слабость.
Как это связано с другими веб-технологиями?Есть четыре способа нарисовать что-либо на веб-странице: Canvas, SVG, CSS и прямая анимация через DOM. Canvas содержит отличия от остальных трёх.
SVG - это API для рисования векторных фигур. Каждая фигура представляет собой объект, который вы можете связать с обработчиками событий. При масштабировании фигуры остаются сглаженными, в то время как в Canvas заметны пиксели.
CSS в реальности предназначен для стилизации элементов. Поскольку DOM не содержит никаких объектов, которые рисуются в Canvas, вы не можете использовать CSS для их стилизации. CSS будет влиять только на прямоугольную площадь самого Canvas, так что вы можете установить границы, цвет фона и на этом всё.
Анимация через DOM : DOM или Document Object Model (объектная модель документа) определяет каждый объект на экране. Анимация с помощью CSS или JavaScript для передвижения объектов в некоторых случаях может быть более плавной, чем сделанной через Canvas, но это зависит от реализации вашего браузера.
Что? Где? Когда?Итак, когда следует использовать Canvas вместо SVG, CSS или элементов DOM? Ну, Canvas по уровню ниже, чем другие, так что у вас больше контроля над рисованием и тратится меньше памяти, но взамен нужно писать больше кода. Используйте SVG, когда у вас имеются фигуры, которые вы хотите отобразить на экране, как на карте сделанной в Adobe Illustrator. Используйте CSS или DOM-анимацию, когда у вас есть большие статические области, которые вы хотите анимировать или желаете использовать трёхмерные преобразования. Для схем, графиков, динамических диаграмм и, конечно, видеоигр, Canvas - наилучший выбор. В дальнейшем мы обсудим несколько библиотек, которые позволяют делать вам больше штук, ориентированных на векторы и объекты, используя Canvas.
Прежде чем двигаться дальше, хочу пояснить, что когда я говорю о Canvas, то подразумеваю двумерный API. Также существует трёхмерный API в работах называемых WebGL. Я не собираюсь о нём рассказывать, потому что он всё ещё находится в разработке и браузеры поддерживают его довольно плохо. Также этот по существу OpenGL от JavaScript находится на более низком уровне чем Canvas и гораздо сложнее в использовании. Когда WebGL станет более зрелым, мы вернёмся к нему в следующих главах.
Поддержка в браузерахИ, наконец, прежде чем мы углубимся в работу с Canvas, давайте поговорим о том, где вы можете его использовать. К счастью Canvas это теперь стабильный API и большинство современных браузеров поддерживают его в некоторой мере. Поддерживает даже Internet Explorer начиная с версии 9 и очень хорошо.
| 9 | 10 | 9 | 3 | 4 |
Большинство мобильных платформ поддерживают Canvas, потому что в основном они основаны на WebKit, который уже давно имеет хорошую поддержку. Я знаю, что поддерживает WebOS, iOS, Android. Считаю, что BlackBerry тоже, по крайней мере, на PlayBook. Windows Phone 7 не поддерживает, но это может измениться в будущем обновлении.
| iOS | webOS | Android | BlackBerry | Windows Phone 7 |
| все | все | 2 | PlayBook и OS 6.0 |
Пока не все мобильные устройства содержат полную или быструю поддержку Canvas, поэтому позже мы рассмотрим, как оптимизировать наш код для мобильных устройств.
Простое рисованиеКак я уже говорил ранее, Canvas - это просто API. Если вы уже делали работу с программированием на Flash или Java 2D, то это должно показаться довольно знакомым. Вы получаете указатель на графический контекст, устанавливаете некоторые свойства, такие как цвет текущей заливки или контура и затем рисуете несколько фигур. Вот некоторые примеры.
В данном примере мы устанавливаем текущий цвет красным и рисуем прямоугольник. Перетащите мышью числа в коде для изменения значений и посмотрите, как это влияет на прямоугольник.
Ctx.fillStyle = "red"; //x, y, ширина, высота ctx.fillRect(20 ,30 ,40 ,50 );
Вот ещё один.
C.fillStyle = "#ccddff"; c.beginPath(); c.moveTo(50,20); c.lineTo(200,50); c.lineTo(150 ,80 ); c.closePath(); c.fill(); c.strokeStyle = "rgb(0,128,0)"; c.lineWidth = 5 ; c.stroke();
В этом примере мы устанавливаем текущий цвет заливки, создаём контур, а затем заливаем и обводим его. Следует отметить, что контекст отслеживает цвет заливки и цвет обводки отдельно. Также обратите внимание на разные формы указания цвета. fillStyle и strokeStyle может быть любым корректным цветом из CSS, таким как шестнадцатеричным, названием или функцией rgb() .
КонтурыCanvas напрямую поддерживает только прямоугольник. Чтобы нарисовать любую другую фигуру необходимо сделать это самостоятельно с помощью контуров. Контуры это фигуры, созданные кучей прямых или изогнутых отрезков линий. В Canvas вы должны вначале определить контур через beginPath() , затем залить его или использовать как маску. Вы определяете каждый отрезок такими функциями как moveTo() , lineTo() и bezierCurveTo() . В данном примере фигура рисуется с помощью moveTo() , затем идёт кривая Безье и несколько линий. После создания контура он заливается и обводится.
C.fillStyle = "red"; c.beginPath(); c.moveTo(10,30); c.bezierCurveTo(50 ,90 ,159 ,-30 ,200,30); c.lineTo(200,90); c.lineTo(10,90); c.closePath(); c.fill(); c.lineWidth = 4; c.strokeStyle = "black"; c.stroke();
Пара слов о системе координат. Canvas ведёт отсчёт от левого верхнего угла с осью у, которая ведёт вниз. Это традиционно для компьютерной графики, но если вы хотите указать другую точку отсчёта, то можете сделать это через трансформацию, о которой мы расскажем позже. Ещё одна важная вещь - спецификация определяет координаты в левом верхнем углу пикселя. Это означает, что если вы рисуете вертикальную линию шириной в один пиксель, начиная с 5.0, то на самом деле это охватывает половину соседних пикселей (от 4.5 до 5.5). Чтобы обойти это сместите ваши координаты по оси х на 0.5. Тогда это даст вам линию, которая идёт с 5.0 до 6.0. В качестве альтернативы вы можете использовать ширину линии, указав 2 или 4.
Canvas может выводить изображения через функцию drawImage .
Есть несколько форм drawImage . Вы можете нарисовать изображение непосредственно на экране в обычном масштабе или растянуть и обрезать его, как вам нравится. Обрезка и растяжение изображений может быть очень удобны для создания спецэффектов в играх, потому что интерполяция изображения часто работает намного быстрее, чем другие типы масштабирования.
Ctx.drawImage(img, 0,0); //normal drawing ctx.drawImage(img, //draw stretched 0,0,66,66, //source (x,y,w,h) 100,0,103 ,100 //destination (x,y,w,h)); ctx.drawImage(img, //draw a slice 20 ,10 ,20 ,20 , //source coords (x,y,w,h) 250,0,250,50//destination coords (x,y,w,h));
Попробуйте поменять переменные, чтобы увидеть, как работает растяжение и обрезка. Чтобы растянуть изображение вы должны указать исходные и конечные координаты. Исходные координаты говорят drawImage какие пиксели взять из изображения. Поскольку рисунок выше имеет размеры 67x67 пикселей, то используя 0,0,66,66 мы отобразим изображение целиком. Конечные координаты говорят drawImage куда поместить пиксели на экране. Изменяя значения w и h можно растянуть и сжать изображение.
Обрезка работает аналогично, но используются исходные координаты, которые не охватывают изображение целиком. Когда вы берёте фрагмент изображения убедитесь, что вы не выходить за его исходные границы, иначе изображение исчезнет.
ТекстCanvas может также рисовать текст. Атрибуты шрифта такие же, как и в аналоге CSS, так что вы можете установить стиль, размер и семейство шрифта. Обратите внимание, что функция fillText(строка,x,y) использует базовую линию текста, а не его верхний край. Если вы поместите ваш текст в 0,0, то он нарисуется за пределами верхней части экрана. Так что опустите y на соответствующее значение.
Ctx.fillStyle = "black"; ctx.font = "italic "+96 +"pt Arial "; ctx.fillText("this is text", 20 ,150 );
ГрадиентыCanvas может заливать фигуры градиентом вместо цвета. Вот линейный градиент:
200 ,0 ); grad.addColorStop(0, "white"); grad.addColorStop(0.5, "red"); grad.addColorStop(1, "black"); ctx.fillStyle = grad; ctx.fillRect(0,0,400,200);
Важно отметить, что градиент закрашивается в той же системе координат, какой рисуется фигура, а не внутренних координат фигуры. В данном примере фигура рисуется в 0,0. Если мы изменим фигуру на 100,100, то градиент будет по-прежнему находиться в начале экрана, так что окажется меньше градиента, вроде этого:
Var grad = ctx.createLinearGradient(0,0,200 ,0 ); grad.addColorStop(0, "white"); grad.addColorStop(0.5, "red"); grad.addColorStop(1, "black"); ctx.fillStyle = grad; ctx.fillRect(100,100,400,200);
Итак, в случае, когда вы считаете, что заливаете фигуру градиентом, но видите единственный цвет, то это может быть потому, что ваши координаты выключены.
Вот и все основы рисования. Давайте остановимся на достигнутом и выполним несколько упражнений в следующей главе. У вас уже должен быть установлен браузер и текстовый редактор. Я рекомендую использовать Chrome , поскольку он содержит хорошие инструменты отладки и jEdit , потому что он бесплатный и кросс-платформенный. Но вы можете использовать браузер и редактор по своему усмотрению.
Сегодня я вам расскажу, как работает в 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, второй — смещение по у, третий — ширина, четвертый — высота. Все, это достаточно запомнить, чтобы рисовать прямоугольники.
Делается в этом случае все таким же образом, изменяется только название метода:
field.fillStyle = "#173045";
field.fillRect(50, 50, 130, 85);
Метод fillStyle позволяет определить цвет заливки. Я пока удалил прошлый наш прямоугольник, новый выглядит так:
Как видите, все 4 параметра задаются в той же последовательности. Если обнулить первые два значения, то прямоугольник будет нарисован в верхнем левом углу холста.
Как вы понимаете, описанные выше методы не годятся для создания сложных фигур. Давайте нарисуем на 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. По любым вопросам пишите в комментарии.
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 предлагает шесть параметров:
Мы модифицируем настройки цвета для 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 предлагает шесть параметров:
Теперь у нас есть дополнительные функции, давайте перенесём в информационную модель гистограммы. Все типы диаграмм имеют информационную модель за ними. Информационная модель построена на числовых данных. Для этого урока мы будем использовать серию данных категорий и их связанные числовые значения представляющих количество виниловых записей из моей коллекции записей, сгруппированных по музыкальным жанрам:
- Классическая музыка: 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
