Элемент <canvas> - одна из самых объёмных и наиболее интересных частей спецификации HTML5. Он представляет из себя интерфейс прикладного программирования для двумерного рисования. Проще говоря, элемент <canvas> - это холст на котором можно рисовать. Представить базовую функциональность canvas можно на примере стандартного графического редактора MS Paint. В действительности пейнт запросто можно полностью воспроизвести при помощи элемента <canvas>. По всему интернету уже относительно давно появляются приложения, грозящие в полнофункциональные программы векторной графики, работающие на самых разных устройствах. Также Canvas применяется для создания массы различных других приложений, таких как: интерактивные элементы сайтов, графические инструменты, полноценные приложения и, что для вас скорее всего самое интересное это игры и симуляторы.
Первый шаг
По традиции первым шагом в изучении любого языка программирования и тому подобного является написание элементарной программы "Hello world!", выводящей на экран данную фразу. Мы же начнём с того, что сначала добавим элемент <canvas> на страницу. Для этого нужно создать текстовый файл в любом текстовом редакторе, назовите его, к примеру, "canvas" и сохраните с расширением .htm Затем напечатайте в этот документ следующий код:
Первая строчка определяет, что документ соответствует стандарту HTML5 Вторая строчка - это просто заголовок документа, в тегах может содержаться произвольный текст Ну и третья строчка собственно и есть тег холста. По умолчанию холст невидим, а его размеры составляют примерно 300 пикселов в ширину и 150 пикселов в высоту. Некоторые, наверное, сейчас выпучили глаза и думают: "А ГДЕ ЖЕ САМЫЕ ПЕРВОСТЕПЕННЫЕ ТЕГИ <HTML>, <HEAD> и <BODY>????77". Дело в том, что данные теги в стандарте HTML5 вовсе необязательны, и без них документ спокойно проходит валидацию. Поэтому, вы можете отказаться от их использования.
Теперь, когда холст добавлен на экран, нам потребуется JavaScript. Допечатайте в свой документ следующий код:
Code
<SCRIPT> var canvas = document.querySelector("canvas"); var holst = canvas.getContext("2d"); canvas.width=800; canvas.height=600; </SCRIPT>
В первой строчке мы записываем элемент canvas в переменную, чтобы в дальнейшем через неё обращаться к нему. Во второй строке мы добавили к нашему холсту двумерный контекст и получили полный доступ ко всей функциональности API и можем рисовать в своё удовольствие. В третьей и четвёртой строках мы указали размеры элемента canvas на 800 писелов в ширину и 600 пикселов в ширину. Вы можете в любой момент вызвать применить данные методы, чтобы изменить размеры холста. Так же вы можете задавать эти параменты и в самом теге <CANVAS width="800" height="600"></CANVAS>. Или, если вы хотите, чтобы холст подстраивался под разрешение экрана, то можете, вместо конкретных значений указать canvas.width=screen.width и canvas.height=screen.height соответственно.
Итак, элемент хоста полностью добавлен на страницу и к нему получен полный доступ, а это значит, что мы теперь можем рисовать на нём всё что угодно в своё удовольствие. Ну и по традиции, как было запланированно давайте на него выведем текст "Hello world!". Для этого можно использовать функцию fillText(text,x,y), имеющую три параметра - сам текст в кавычках и собственно координаты x и y. Допишите в свой скрипт следующую строчку:
Code
holst.fillText('Hello world!',10,10);
Также вы можете задать цвет рисования, используя метод fillStyle и присвоив ему значение цвета. Это следует делать перед функцией рисования. Добавьте следующую строчку перед рисования текста, чтобы сделать его красным.
Code
holst.fillStyle='red';
Значение цвета можно указывать как словами "red", "blue", "green" и т.п., так и в системе "rgb(255,0,0)" или шестнадцатиричном виде "#FF0000", главное не забывать ставить кавычки. По умолчанию canvas рисует чёрным цветом.
Теперь вы можете запустить документ в браузере и проверить результат, и если вы видите заветную фразу, то я спешу вас поздравить, вы только что совершили свой первый робкий шаг в изучении HTML5 Canvas! P.S. Если у вас что-то не получилось, сверьте ваш код с моим и найдите ошибки.
Первый шаг на пути к двери, открывающей обширные просторы возможностей HTML5 Canvas вы уже сделали, уверенным он получился или нет пока неважно, двигаемся дальше. В этой части урока мы научимся с вами рисовать на холсте различные геометрические фигуры и начнём с самого простого - рисования прямоугольников. Существует два основных метода рисования прямоугольника:
.fillRect(x, y, w, h);
.strokeRect(x, y, w, h);
Оба этих метода принимают четыре аргумента: x-позиция левого верхнего угла по гонризонтали, y-позиция левого верхнего угла по вертикали, w-ширина прямоугольника в пикселах, h-высота прямоугольника в пикселах Различия этих методов заключаются только в том, что первый рисует прямоугольник полностью заливая его цветом, а второй рисует только контур прямоугольника. Добавьте на холст прямоугольник закрашенный жёлтым цветом:
Таким же образом можно закрасить весь холст в определённый цвет, то есть задать ему фон, для этого перед всеми выше стоящими в коде функциями рисования добавьте на холст прямоугольник соответсвующий размеру холста. Сейчас фон у вас прозрачный (по умолчанию), сделайте его чёрным:
Обратите внимание, что для всех stroke-методов (контуров) рисования стиль указывается методом .strokeStyle, для .fill-методов (c заливкой) соответственно .fillStyle.
Также можно задавать ширину контура в пикселах. Чтобы сделать контур последнего прямоугольника пожирнее, вставьте следующую строчку перед строкой его рисования:
Code
holst.lineWidth=10;
И наконец, если вы укажете одинаковые аргументы в методах рисования первого и второго прямоугольников, то есть укажете одни и те же координаты, а также размеры, то вы получите сплошной прямоугольник с заливкой и обведённый контуром, как бы очевидно это не было
Теперь перейдём к следующему более сложному, но и более гибкому методу рисования. Этот метод представляет собой рисование путей или произвольное рисование по координатам, вам будет легче разобраться в этом, если вы представите, как-будто устанавливаете карандаш на холст и от начальной точки последовательно проводите линии к указанным точкам. таким образом вы можете рисовать любые произвольные фигуры различной формы. Для этого в вашем распоряжении есть целый набор, состоящий из нескольких методов:
.beginPath(); - объявляет начало рисования пути, не принимает никаких аргументов.
.moveTo(x,y); - указывает точку с координатами x и y, с которой вы хотите начать рисование.
.lineTo(x,y); - рисует линию к заданной точке в координатах x и y.
.closePath(); - объявляет конец рисования пути и рисует линию от последней точки к начальной, не принимает никаких аргументов.
После рисования пути вам нужно вывести его на холст, воспользовавшись уже знакомыми методами .fill() или .stroke(), в первом случае внутрення область пути будет закрашена, во втором будет нарисован только контур, также вы можете совмещать эти методы. Не забывайте, что вы также можете управлять такими свойствами рисования, как цвет заливки, цвет контура, ширина линии и т.д.
Таким образом вы можете рисовать любые другие фигуры, задавая произвольное количество точек в координатах. Рисование более сложных путей с использованием различных дуг, окружностей, кривых мы возможно разберём в следующий раз.
Заключение
На этом мы заканчиваем первое знакомство с HTML5 Canvas. В этом уроке, мы научились добавлять элемент canvas на страницу, изменять его параметры, познакомились с основными функциями рисования, а также научились управлять стилями рисования. В следующий раз мы углубимся в изучение ещё немного дальше, и я покажу вам как можно обрабатывать изображения на холсте, а так же мы сделаем первую анимацию.
А пока советую вам не останавливаться на прочтении этого урока и немного уже самостоятельно потренироваться с рисованием, используя знания, полученные из этого урока. Чтобы вам помочь, я предоставляю ниже краткий справочник, по изученным сегодня методам:
Quote
.querySelector("canvas") - идентифицирует элемент холста .getContext("2d") - добавляет к выбранному элементу холста двумерный контекст .width=x - указывает ширину элемента в пикселах .height=x - указывает высоты элемента холста в пикселах .fill() - метод рисования с заливкой .stroke() - метод рисования границы .fillStyle="цвет" - указывает цвет заливки .strokeStyle="цвет" - указывает цвет границы .lineWidth=x - указывает ширину границы в пикселах .fillRect(x, y, w, h) - рисует прямоугольник с координатами левого угла в x и y, шириной w, высотой h и заливает его цветом .strokeRect(x, y, w, h) - аналогично предыдущему методу, но рисует границу прямоугольника без заливки .beginPath() - объявляет начало рисования пути .moveTo(x, y) - объявляет начальную точку рисования пути в координатах x и y .lineTo(x, y) - рисует линию от текущей точки к точке с координатами x и y .closePath() - объявляет конец рисования пути и рисует линию от последней точки к начальной
ммм, как я понял уроки будут посвященные только Канвасу????
Ну, в общем-то нет. Я попытаюсь затронуть более широкий спектр возможностей HTML5, при этом рассматривая его в первую очередь как средство разработки интерактивных приложений и игр, а не как язык разметки веб-старничек. Собственно мои уроки и будут направлены на написание несложных игрушек в конечном итоге, обходя стороной такие моменты как структура верстки, форматирование текста, создание форм и т.п. Кроме канвы рассмотрим и другие элементы: для мультимедиа - видео и аудио, а также их взаимодействие, хранилище данных, автономную работу, фоновые вычисления и сокеты. rtytyrtyr
@noTformaT
