реферат

НИУ МЭИ

Реферат по курсу вычислительные машины, системы и сети на тему:

«HTML 5. Элемент холст для непосредственного метода рисования в 2D и его применение»

Выполнила Студентка А-13-09 Шорникова Дарья

Преподаватель Чернов Петр Леонидович

Москва, 2013 г.

1

Новый элемент

В стандарте HTML5 появился новый элемент Canvas, предназначенный для создания растрового двухмерного изображения при помощи JavaScript.

Холст – это прямоугольная область разметки, изначально пустая, не имеющая содержимого и рамки. По умолчанию высота холста составляет 150 px, ширина – 300 px. Можно располагать несколько холстов на странице, и, если присваивать им ID, то следует обращаться к ним по отдельности. Изменение высоты или ширины холста сотрет всё его содержимое и все настройки, проще говоря он создастся заново. Начало отсчёта (0,0) находится в левом верхнем углу. Но его можно сдвигать. 3D контекста пока нет в официальной спецификации, но существуют некоторые наработки.

Так как к Canvas можно обращаться только с помощью JavaScript, необходимо использовать технологию Document Object Model. С ее помощью можно найти элемент, расположенный на странице. Согласно DOM-модели, документ является иерархией. Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п.

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

<canvas height='320' width='480' id='example'>

Такая конструкция позволяет найти элемент по ID:

var a_canvas = document.getElementById("a");

Далее, скрипту необходимо передать контекст холста, причем необходимо указать параметр 2D:

var b_context = b_canvas.getContext("2d");

Самое простое, что можно нарисовать на холсте – это заполненный цветом прямоугольник.

b_context.fillRect(50, 25, 150, 100);

Вот некоторые из свойств для задания стиля рисования:

Свойство fillStyle может быть цветом, рисунком или градиентом (подробнее о градиентах чуть ниже). По умолчанию fillStyle заливает сплошным черным цветом, но вы можете установить что угодно. Каждый контекст рисунка помнит свои собственные свойства при открытии страницы, пока вы ее не обновите.

fillRect(x, y, width, height) рисует прямоугольник, заполненный текущим стилем заливки.

Свойство strokeStyle как и fillStyle может быть цветом, рисунком или градиентом.

2

strokeRect(x, y, width, height) рисует прямоугольник с текущим стилем линии. strokeRect не заливается внутри, он просто рисует границы.

clearRect(x, y, width, height) удаляет пиксели в указанном прямоугольнике.

Такой простой скрипт нарисует прямоугольник черного цвета

var b_canvas = document.getElementById("b"); var context = b_canvas.getContext("2d"); context.fillStyle=”#AAAAA”; context.fillRect(50, 25, 150, 100);

Рис. 1. Простейшее применение canvas

Вызов метода fillRect() рисует прямоугольник и заполняет его текущим стилем заливки, исходно черный цвет. Прямоугольник задается левым верхним углом (50, 25), шириной

(150) и высотой (100).

Координаты холста

Холст это двумерная сетка. Координата 0,0 находится в левом верхнем углу холста. Вдоль оси X значения растут к правому краю холста. По оси Y значения растут к нижнему краю холста. Рисовать можно с помощью линий.

Для рисования линии первой должна быть вызвана функия beginPath. Чтобы отрисовать наши линии, надо вызвать метод stroke(), если же нужен закрашенный рисунок, то есть функция fill(). Метод closePath завершает дело начатое beginPath т.е. прерывает линию, но не отображает.

1.moveTo(х, у) перемещает к указанной начальной точке.

2.lineTo(х, у) рисует линии до указанной конечной точки.

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

for (var x = 0.5; x < 500; x += 10) { context.moveTo(x, 0); context.lineTo(x, 375);

}

3

for (var y = 0.5; y < 375; y += 10) { context.moveTo(0, y); context.lineTo(500, y);

}

Чтобы сделать линии видимыми, необходимо установить стиль штриха:

context.strokeStyle = "#EEE"; context.stroke();

Теперь нарисуем горизонтальную стрелку. Все линии и кривые на контуре нарисованы тем же цветом. Чтобы рисовать другим цветом, надо начать рисование новой линией.

context.beginPath(); context.moveTo(0, 40); context.lineTo(240, 40); context.moveTo(260, 40); context.lineTo(500, 40); context.moveTo(495, 35); context.lineTo(500, 40); context.lineTo(495, 45);

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

context.moveTo(60, 0); context.lineTo(60, 153); context.moveTo(60, 173); context.lineTo(60, 375); context.moveTo(65, 370); context.lineTo(60, 375); context.lineTo(55, 370); context.strokeStyle = "#000"; context.stroke();

Получилась вот такая сетка.

4

Рис. 2. Координатная сетка

Можно рисовать не просто линию, а окружность или сегмент окружности с помощью функции arc.

arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise)

centerX, centerY — координаты центра дуги;

radius — величина радиуса;

startingAngle, endingAngle — начало и окончание дуги. Значения задаются в радианах;

antiClockwise — направление соединения точек начал и конца дуги: по часовой стрелки или против. По умолчанию значение равно false — рисуем по часовой стрелке. Значение true — против часовой.

Рис 3. Использование функции arc()

var rc=document.getElementById("canvas").getContext('2d'); rc.beginPath();

rc.arc(100, 100, 50, 0, 2*Math.PI, true); rc.stroke();

Рис. 4. Сегменты окружности

5

Кривые Безье

Кривая Безье – это особый сплайн, обычно гладкая кривая, которая рисуется путем последовательного вычисления координат опорных точек. Если опорных точек только две, то кривая становится отрезком. Такого рода кривые используются в TrueType и векторной графике.

Для создания кривых Безье в HTML5 Canvas можно использовать метод bezierCurveTo(). Кривые Безье задаются с помощью начальной точки, двух контрольных точек и конечной точки. В отличие от квадратичных кривых, кривые Безье определяются двумя контрольными точками вместо одной, позволяя создавать кривые с более сложным очертанием.

Метод, рисующий кривую Безье:

context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

Чтобы назначить начальную точку, необходимо вызвать метод

context.moveTo(startX, startY)

Рис. 5. Кривая Безье

Создание текста

Следующие атрибуты шрифта доступны в контексте рисования.

font может содержать все, что вы бы добавили в свойство CSS font. Включает стиль шрифта, насыщенность, размер, межстрочное расстояние и семейство гарнитур.

textAlign управляет выравниванием текста. Похоже на свойство CSS text-align, но не идентично ему. Возможные значения: start, end, left, right и center.

textBaseline говорит где рисуется текст относительно начальной точки. Возможные значения: top,hanging, middle, alphabetic, ideographic и bottom.

6

Существуют два метода для вывода текста: fillText и strokeText. Первый отрисовывает текст, заполняя его заливкой стиля fillStyle, другой рисует обводку текста, используя стиль strokeStyle. Оба метода принимают три аргумента: собственно текст и координаты (x,y), в которых его необходимо вывести. Также существует четвертый необязательный аргумент — максимальная ширина. Этот аргумент необходим для умещения текста в заданную ширину.

var c_canvas = document.getElementById("myCanvas"); var context = c_canvas.getContext("2d"); context.font = "14px sans-serif"; context.fillText("Можно работать с текстом", 20, 20); context.fillText("А можно и не работать", 20, 40); context.font = "bold 15px segoe script"; context.fillText("Да хоть курсивом", 20, 80);

context.strokeStyle="#990000"; context.font = "35px palatino linotype"; context.strokeText("Контур текста",20,120);

Рис. 6. Пример работы с текстом

Цвет текста задается при помощи fillStyle – для задания цвета заливки и strokeStyle – для задания цвета обводки. Так же как и в CSS3 можно накладывать тени и на текст. Это делается при помощи: shadowColor –задание цвета тени, shadowOffsetX и shadowOffsetY –

задание отступа и shadowBlur – задание размытия тени.

context.shadowColor=”#F00”; context.shadowOffsetX=5;

context.shadowOffsetY=5;

context.shadowBlur=5; context.strokeText(“Shadow text”,20,100);

7

Градиенты

Градиент это плавный переход между двумя или более цветами. Контекст рисования холста поддерживает два типа градиента:

1.createLinearGradient(x0, y0, x1, y1) рисует вдоль линии от (x0, y0) до (x1, y1).

2.createRadialGradient(x0, y0, r0, x1, y1, r1) рисует по конусу между двумя окружностями. Первые три параметра определяют начальную окружность с центром (x0, y0) и радиусом r0. Последние три параметра представляют последнюю окружность с центром (x1, y1) и радиусом r1.

После того как получен градиентный объект, можно определить цвета градиента. Градиент имеет два или более цвета остановки, которые могут быть в любом месте вдоль градиента. Чтобы добавить цвет остановки, необходимо указать его позицию вдоль градиента, она может быть от 0 до 1.

Определение градиента не рисует что-либо на холсте, это просто объект, спрятанный гдето в памяти. Чтобы нарисовать градиент, вызовем fillStyle и fillRect.

var d_canvas = document.getElementById("myCanvas"); var context = d_canvas.getContext("2d");

var my_gradient = context.createLinearGradient(0, 0, 300, 0); my_gradient.addColorStop(0, "#FFFFFF"); my_gradient.addColorStop(1, "#666666");

context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 150);

Рис 7. Черно-белый градиент

Например, можно задать несколько цветов останова для градиента.

var d_canvas = document.getElementById("myCanvas"); var context = d_canvas.getContext("2d");

var my_gradient = context.createLinearGradient(0, 0, 300, 0); my_gradient.addColorStop(0, "#FFFFFF"); my_gradient.addColorStop(0.3, "#b9d3ee"); my_gradient.addColorStop(1, "#607b8b");

context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 150);

8

Рис. 8. Трехцветный линейный градиент

var d_canvas = document.getElementById("myCanvas"); var context = d_canvas.getContext("2d");

var radgrad4 = context.createRadialGradient(60,70,15,80,70,60); radgrad4.addColorStop(0, '#F4F201'); radgrad4.addColorStop(0.8, '# ffb90f'); radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); context.fillStyle = radgrad4;

context.fillRect(0,0,150,150);

Рис. 9. Пример радиального градиента

Изображения

Контекст рисования холста определяет метод drawImage() для вывода изображений. Этот метод может иметь три, пять или девять аргументов.

drawImage(image, dx, dy) принимает изображение и выводит его на холст. Заданные координаты (dx, dy) соответствуют левому верхнему углу изображения, координаты (0, 0) выводят изображения в левом верхнем углу холста.

drawImage(image, dx, dy, dw, dh) принимает изображение, масштабирует его до ширины dw и высоты dh и выводит в точке с координатами (dx, dy).

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) принимает изображение, обрезает его до прямоугольника (sx, sy, sw, sh), масштабирует до размеров (dw, dh) и выводит в точке с координатами (dx, dy).

Спецификация HTML5 поясняет параметры drawImage():

Исходный прямоугольник это прямоугольник (в пределах исходного изображения), чьи углы это четыре точки (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).

Прямоугольник назначения это прямоугольник (в холсте), чьи углы в четырех точках (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).

9