Лабораторная работа №4

Внедрение рисунков

Основные положения

Для выполнения рисунков в браузере его, точнее его часть нужно перевести в графический режим, точнее получить доступ к каждому пикселю. Для этого предназначен тег <CANVAS>. Canvas — это растровый холст, на котором можно рисовать с помощью методов JavaScript, предоставляющий базовые возможности: отрисовку примитивов и текста, побитовый доступ к изображению, вывод изображений и афинные преобразования контекста отрисовки. Canvas имеет около 40 методов и 20 атрибутов, которые можно разбить на несколько групп (см. например, вот эту шпаргалку).

CANVAS

Тег <canvas> предоставляет ограниченную область для рисования в ней. Она используется для рисования графики с помощью JavaScript. Вот так выглядит описание этого элемента:

<canvas id="example" width="400" height="200"></canvas>

Здесь два обязательных атрибута - width и height, которые обозначают длину и высоту области рисования соответственно. Если они не указаны, то по умолчанию длина будет равно 300 пикселей, а высота 150 пикселей. Важно заметить, что этот тег обязательно должен закрываться. т.е. должен выглядеть так:

<canvas ...></canvas> ,

но никак не

<canvas ... /> .

Иногда рисунок нужно заключить в рамку. Для этого можно использовать атрибут style. Например

style='border:1px solid' style='border:1px solid'

Тег <canvas> это элемент HTML, но работать с ним можно используя код javascript. Как сделать это показано в следующем примере:

//Сначала нужно получить объект canvas

var canvas = document.getElementById('example');//example это id тега

//потом нужно получить контекст, т.е. информацию об объекте canvas

var ctx = canvas.getContext('2d');

Не все браузеры поддерживают HTML5. Поэтому рассмотрим как проверить поддержку Canvas API средствами JavaScript:

var canvas = document.getElementById('example');

if (canvas.getContext){

var context = canvas.getContext('2d');

// здесь размещается код рисования на canvas

}else{

// здесь размещается код, который обрабатывается если браузер не поддерживает Canvas API

}

В дальнейшем будем предполагать, что используемый браузер поддерживает элемент canavas