Описание методов и алгоритмов рисования эллипса в HTML5 Canvas и определения его площади (в пикселах)

Содержание

Введение

Постановка задачи
Используемые методы и свойства HTML5 Canvas
Алгоритм построения эллипса
Площадь эллипса и ошибка её определения

Заключение
Использованные источники
Приложение 1.Правила округления при приближённых вычислениях.

Введение

В последнее время для морфометрических измерений в гидробиологии всё чаще используются возможности компьютерной 2D-графики. Особый интерес в этой связи представляют возможности веб-технологий (web) для использования в так называемых "облачных" вычислениях.

Рассматриваемый пример использования web посвящён проверке возможности расчёта площади эллипса по его растровому изображению, помещённому в элемент HTML5 Canvas [1,2]. Площадь в данном примере рассчитывается в пикселах. Для расчётов используется программы (скрипты), написанные на языке Javascript, с использованием свойств и методов программного интерфейса (API) HTML5 Canvas.

Зачем рассматривается этот пример? Во-первых, из-за необходимости исследовать зависимость точности определения площади от типа монитора. Изображение, представляемое средствами HTML5 Canvas, является растровым изображением (не векторным). Элементарная неделимая точка растра - пиксел. Пиксел - это квадрат, длина стороны которого зависит от разрешения экрана используемого монитора (дисплея).
Во-вторых, элемент HTML5 Canvas отображается не совсем одинаково в разных браузерах.

HTML5 Canvas стал поддерживаться браузерами относительно недавно и, несмотря на бум посвящённых ему публикаций, примеров его применения в различных предметных областях ещё недостаточно. В то же время привлекает доступность и лёгкость использования свойств и методов этого элемента по сравнению с другими, более "тяжёлыми" технологиями (например, WebGL [4,5]).

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

На эллипс похожи формы раковин некоторых двустворчатых моллюсков, поэтому эксперименты с этим примером являются одним из этапов исследования возможности морфометрических web-измерений раковин двустворчатых моллюсков по их цифровым изображениям.

1. Постановка задачи

Задача состоит в построении тестовой геометрической фигуры средствами API HTML5 Canvas с использованием языка Javascript и в приближённом вычислении площади этой фигуры по её растровому представлению (площади растровой фигуры). В качестве такой фигуры взят эллипс. Точную величину площади эллипса можно определить по аналитической формуле (площади геометрической фигуры).

Отношение приближённой и точной площадей позволяет вычислить относительную ошибку определения площади по растровому изображению.

2. Используемые методы и свойства API HTML5 Canvas

Canvas (русс. - холст) встраивается в HTML-документ с помощью тэга <canvas>...</canvas>

К этому тэгу, как и к другим тэгам, можно обращаться из скриптов, как к объекту доменной модели или по имени. Все свойства и методы API содержатся в так называемых контекстах - объектах, посвящённых какому-то типу графики. Мы будем использовать контекст для работы с 2D-изображениями. Этого достаточно, хотя эти и другие, более развитые методы, имеются в контексте для работы с 3D.

Итак, встраиваем элемент Canvas в HTML-документ и получаем его в скрипте, как объект. Затем получаем 2D-контекст для этого объекта:

Координаты холста отсчитываются от точки x=0, y=0, находящейся в левом верхнем углу (начало координат или начало отсчёта). Координаты увеличиваются в горизонтальном направлении вправо и в вертикальном - вниз. Каждая координата обозначает местонахождение соответствующего пиксела.

Обо всех свойствах и методах API HTML5 Canvas и примерах их применения можно узнать в многочисленных источниках, например, здесь [1,2,3]. Ниже кратко рассмотриваются лишь свойства и методы API HTML5 Canvas, используемые в наастоящем примере.

Стили пера и кисти

cntx.strokeStyle - свойство, определяет стиль пера;
cntx.fillStyle - свойство, определяет стиль кисти.
cntx.lineWidth - свойство, определяет ширину линии (пера).

В качестве значений этих свойств можно использовать:
RGB-цвет в шестнадцатеричном виде. Например, "#ff0000";
RGB-функцию вида "rgb(красный, зеленый, синий)". Например, "rgb(255,0,0)" и "rgb(100%, 0%, 0%)";
RGBА-функцию вида "rgbа(красный, зеленый, синий, альфа-канал)". Например "rgbа(255,0,0,0.5)";
а также методы, создающие различные градиенты (мы не будем здесь использовать);
ширину линии будем задавать в пикселах.

Вот примеры задания этих свойств:
cntx.strokeStyle = "#ff0";
cntx.fillStyle = "rgbа(255, 0, 0, 0.5)";
cntx.lineWidth = 4.

Методы для рисования прямоугольников

cntx.rect(x, y, width, height) - выводит прямоугольник;
cntx.strokeRect(x,y,width,height) - выполняет визуализацию контура прямоугольника;
cntx.fillRect(x,y,width,height) - выполняет визуализацию закраски прямоугольника;
cntx.clearRect(x,y,width,height) - очищает прямоугольную область от любого содержимого и восстанавливает исходный прозрачный цвет.

Эти методы принимают в качестве аргументов координаты левого верхнего угла прямоугольника, а также его ширину и высоту.

Методы для рисования сложного контура

cntx.beginPath() - начинает сложный контур;
cntx.moveTo(x, y) - перемещает текущие координаты пера в (x, y);
cntx.lineTo(x, y) - рисует линию от текущих координат до указанных в (x, y);
cntx.closePath() - завершает сложный контур;
cntx.arc(x, y, radius) - выводит окружность;
cntx.stroke() - выполняет визуализацию построенного контура на холсте;
cntx.fill() - выполняет визуализацию закраски кистью;
cntx.isPointInPath(x,y) - определяет, находится ли точка внутри контура, возвращая true или false.

Использование первых четырех методов позволяет построить контур в виде многоугольника. В примере мы их не используем, а здесь они приводятся для того, чтобы было понятно, что методы API HTML5 Canvas похожи на функции, используемые в других языках программирования. Рисование окружности и круга выполнить ещё более просто для этого надо вызвать методы: cntx.beginPath(); cntx.arc(x, y, radius); cntx.closePath(); и затем отобразить построение с помощью cntx.stroke() - для окружности и cntx.fill() - для круга.

Методы преобразований

scale(x, y) - масштабирование;
cntx.translate(x, y) - линейный сдвиг координат;
cntx.save() - сохранить состояние;
cntx.restore() - востановить состояние.

Перечисленные методы достаточно просты и их не трудно понять, усвоив материал из раздела 3. Имеются также более сложные методы преобразований (и анимации), с помощью которых можно получить поразительные 2D (и даже 3D) эффекты, но их следует использовать только лишь, если вы хорошо понимаете математические алгоритмы, лежащие в основе 2Dграфики.

3. Алгоритм построения эллипса

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

/************************************************************************
Функция вычерчивания эллипса в HTML5 Canvas                       
 	 Идея - отсюда: http://3wcom.ru/topic/risuem-mashinu-na-canvas.html 
*************************************************************************/
function ellips(w,h) {
	w=Number(w);
	h=Number(h);
	var d=document;
	var cnvs, cntxt;		// Холст и контекст для него
	cnvs = d.getElementById("ellips");
	var cntxt = cnvs.getContext("2d");
	cnvs.width = w+10;
	cnvs.height = h+10;
	cnvs.style.display="inline";
				// Рисуем квадрат, для фона
				cntxt.fillStyle = "rgba(0,75,75,1.0)";
				cntxt.fillRect(0,0,cnvs.width,cnvs.height);
	cntxt.save();
	cntxt.beginPath();
	// Переносим систему координат (СК) в центр будущего эллипса
	cntxt.translate(cnvs.width/2, cnvs.height/2);
	/*
 	* Масштабируем по х.
	* В результате окружность вытянется в a / b раз
	* и станет эллипсом
	*/
	cntxt.scale((w/2) / (h/2), 1);
	// Рисуем окружность, которая благодаря масштабированию станет эллипсом
	cntxt.arc(0, 0, h/2, 0, Math.PI * 2, true);
	cntxt.closePath();
	// Восстанавливаем СК и масштаб
	cntxt.restore();
	// Задаём стили, выводим контур и закрашенный эллипс на холст
	cntxt.lineWidth = 2;
	cntxt.strokeStyle = "rgba(255,0,0,1.0)";
	cntxt.fillStyle = "rgba(0,150,150,1.0)";
	cntxt.stroke();
	cntxt.fill();
}

4. Площадь эллипса и ошибка её определения

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

По помещённому ниже коду функции, реализующей определение площади эллипса, представленном в растровом виде, также не трудно понять, как это делается.

Заключение

В результате получен HTML-документ со встроенными скриптами, позволяющий провести эксперименты по определению площадей для эллипсов различных размеров, в различных браузерах и мониторах. Ниже представлена таблица, полученная студентами группы МК-1 (2012-го года поступления). На основании данных этой таблицы можно заключить ... (продолжение следует)

Использованные источники

Про HTML5 Canvas

Canvas. Краткий обзор: http://codestorage.ru/vvedenie-v-canvas-2d-api/
Canvas. Обзор с примерами: http://www.pixelcom.crimea.ua/rukovodstvo-po-html5-canvas.html
Canvas. Сводка методов и свойств: http://webonrails.ru/articles/html5/189/
Ссылки по WebGL API для Canvas HTML
Введение в WebGL (англ.):http://dev.opera.com/articles/view/an-introduction-to-webgl/
Постобработка изображений с WebGL с использованием texImage2D в Canvas HTML:http://css-live.ru/articles/postobrabotka-izobrazhenij-i-video-s-webgl.html
Ссылки по работе с изображениями на экранах различного разрешения
Типы мониторов с различным разрешением:http://ru.wikipedia.org/wiki/Разрешение_(компьютерная_графика)
Расчёт разрешения в ppi (англ. pixels per inch):http://ru.wikipedia.org/wiki/Ppi
Диагональ и разрешение различных мониторов:http://www.kreker.org/my/16
Калькулятор разрешения вашего монитора:http://force-net.com/2009/10/blog-post.html
Калькулятор разрешений различных мониторов:http://axofiber.org.ru/inside/pixel.size.htm
Проблемы десктопных браузеров:http://www.beskrovnyy.com/verstka/skaz-o-dvux-vyuportax-chast-pervaya/
Проблемы мобильных браузеров:http://www.beskrovnyy.com/verstka/skaz-o-dvux-vyuportax-chast-vtoraya/

Приложение 1. Правила округления при приближённых вычислениях

При измерениях и последующих вычислениях с помощью компьютера мы имеем дело, в основном, с приближёнными числами. При этом верными (значащими) цифрами являются лишь те, которые соответствуют точности измерений. Например, при измерении длины раковины моллюска штангенциркулем, точность измерений составляет 0.1 мм. Поэтому, если результат измерений записан в виде 33.45, то значащими будут только первые три цифры, то есть, следует записать либо 33.4, либо 33.5.

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

При сложении и вычитании приближенных чисел в результате следует оставлять столько десятичных знаков, сколько их имеет число с наименьшим количеством знаков, плюс один запасной знак для возможного последующего округления окончательно полученного числа. Например, при сложении чисел 3.14159 + 2.72+ 0.1 + 3.142 = 9.12359 в результате оставляем число 9.12. Если число, получаемое в результате суммирования, используется для продолжения вычислений, то нужно взять брать 9.12.
При возведении в степень и извлечении корня нужно оставлять столько значащих цифр, сколько их было в числе, возводимом в степень или подкоренном числе.
При умножении и делении результат округляется до наименьшего числа значащих цифр, которое имеют операнды. Например, при вычислении скорости судна, проходящего расстояние 9.5•10² миль, за 102 часа результат должен быть округлён до 9.3 узлов, поскольку именно две значашие цифры имеет расстояние, хотя время — три.
Округляемое число с последней незначащей цифрой 5 всегда округляется до чётного числа. Например, число 1.335 при округлении до сотых долей будет 1.34, а число 1.345 после округления будет таким же - 1.34.