Четверг, 28 Марта 2024, 15:33

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Форум игроделов » Дополнительные темы » Вебмастеринг » HTML5 Canvas. Урок 1. (Revolver_45)
HTML5 Canvas. Урок 1.
Revolver_45Дата: Четверг, 17 Ноября 2011, 14:22 | Сообщение # 1
почетный гость
Сейчас нет на сайте
Введение

Элемент <canvas> - одна из самых объёмных и наиболее интересных частей спецификации HTML5. Он представляет из себя интерфейс прикладного программирования для двумерного рисования. Проще говоря, элемент <canvas> - это холст на котором можно рисовать. Представить базовую функциональность canvas можно на примере стандартного графического редактора MS Paint. В действительности пейнт запросто можно полностью воспроизвести при помощи элемента <canvas>. По всему интернету уже относительно давно появляются приложения, грозящие в полнофункциональные программы векторной графики, работающие на самых разных устройствах. Также Canvas применяется для создания массы различных других приложений, таких как: интерактивные элементы сайтов, графические инструменты, полноценные приложения и, что для вас скорее всего самое интересное это игры и симуляторы.

Первый шаг

По традиции первым шагом в изучении любого языка программирования и тому подобного является написание элементарной программы "Hello world!", выводящей на экран данную фразу. Мы же начнём с того, что сначала добавим элемент <canvas> на страницу.
Для этого нужно создать текстовый файл в любом текстовом редакторе, назовите его, к примеру, "canvas" и сохраните с расширением .htm
Затем напечатайте в этот документ следующий код:

Code
<!DOCTYPE html>  
<TITLE>canvas</TITLE>  
<CANVAS></CANVAS>



Теперь, когда холст добавлен на экран, нам потребуется JavaScript.
Допечатайте в свой документ следующий код:
Code
<SCRIPT>  
var canvas = document.querySelector("canvas");  
var holst = canvas.getContext("2d");  
canvas.width=800;  
canvas.height=600;  
</SCRIPT>



Итак, элемент хоста полностью добавлен на страницу и к нему получен полный доступ, а это значит, что мы теперь можем рисовать на нём всё что угодно в своё удовольствие. Ну и по традиции, как было запланированно давайте на него выведем текст "Hello world!". Для этого можно использовать функцию fillText(text,x,y), имеющую три параметра - сам текст в кавычках и собственно координаты x и y.
Допишите в свой скрипт следующую строчку:
Code
holst.fillText('Hello world!',10,10);


Также вы можете задать цвет рисования, используя метод fillStyle и присвоив ему значение цвета. Это следует делать перед функцией рисования.
Добавьте следующую строчку перед рисования текста, чтобы сделать его красным.
Code
holst.fillStyle='red';



Теперь вы можете запустить документ в браузере и проверить результат, и если вы видите заветную фразу, то я спешу вас поздравить, вы только что совершили свой первый робкий шаг в изучении HTML5 Canvas!
P.S. Если у вас что-то не получилось, сверьте ваш код с моим и найдите ошибки.


Рисование фигур

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

  • .fillRect(x, y, w, h);
  • .strokeRect(x, y, w, h);

    Оба этих метода принимают четыре аргумента: x-позиция левого верхнего угла по гонризонтали, y-позиция левого верхнего угла по вертикали, w-ширина прямоугольника в пикселах, h-высота прямоугольника в пикселах
    Различия этих методов заключаются только в том, что первый рисует прямоугольник полностью заливая его цветом, а второй рисует только контур прямоугольника.
    Добавьте на холст прямоугольник закрашенный жёлтым цветом:
    Code
    holst.fillStyle="yellow";  
    holst.fillRect(100,10,100,100);

    Таким же образом можно закрасить весь холст в определённый цвет, то есть задать ему фон, для этого перед всеми выше стоящими в коде функциями рисования добавьте на холст прямоугольник соответсвующий размеру холста. Сейчас фон у вас прозрачный (по умолчанию), сделайте его чёрным:
    Code
    holst.fillStyle="black";  
    holst.fillRect(0,0,canvas.width,canvas.height);

    Теперь нарисуйте ещё один прямоугольник, используя второй метод и предварительно задав ему цвет, например, синий:
    Code
    holst.strokeStyle="blue";  
    holst.strokeRect(210,10,100,100);


    Также можно задавать ширину контура в пикселах.
    Чтобы сделать контур последнего прямоугольника пожирнее, вставьте следующую строчку перед строкой его рисования:
    Code
    holst.lineWidth=10;

    И наконец, если вы укажете одинаковые аргументы в методах рисования первого и второго прямоугольников, то есть укажете одни и те же координаты, а также размеры, то вы получите сплошной прямоугольник с заливкой и обведённый контуром, как бы очевидно это не было smile

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

  • .beginPath(); - объявляет начало рисования пути, не принимает никаких аргументов.
  • .moveTo(x,y); - указывает точку с координатами x и y, с которой вы хотите начать рисование.
  • .lineTo(x,y); - рисует линию к заданной точке в координатах x и y.
  • .closePath(); - объявляет конец рисования пути и рисует линию от последней точки к начальной, не принимает никаких аргументов.

    После рисования пути вам нужно вывести его на холст, воспользовавшись уже знакомыми методами .fill() или .stroke(), в первом случае внутрення область пути будет закрашена, во втором будет нарисован только контур, также вы можете совмещать эти методы. Не забывайте, что вы также можете управлять такими свойствами рисования, как цвет заливки, цвет контура, ширина линии и т.д.

    Добавьте на холст зелёный треугольник:
    Code
    holst.fillStyle='green';
    holst.beginPath();
    holst.moveTo(100,200);
    holst.lineTo(100,300);
    holst.lineTo(300,300);
    holst.closePath();
    holst.fill();


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

    Заключение

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

    А пока советую вам не останавливаться на прочтении этого урока и немного уже самостоятельно потренироваться с рисованием, используя знания, полученные из этого урока. Чтобы вам помочь, я предоставляю ниже краткий справочник, по изученным сегодня методам:


    rtytyrtyr
  • МорриартеДата: Четверг, 17 Ноября 2011, 14:30 | Сообщение # 2
    LINUX ФАНАТ
    Сейчас нет на сайте
    Вот это полезно.
    noTformaTДата: Четверг, 17 Ноября 2011, 15:08 | Сообщение # 3
    Ukrainian independent game developer
    Сейчас нет на сайте
    Олично. Хорошо что привели некоторые методы класса Context2D....

    ммм, как я понял уроки будут посвященные только Канвасу????


    @noTformaT
    МорриартеДата: Четверг, 17 Ноября 2011, 18:31 | Сообщение # 4
    LINUX ФАНАТ
    Сейчас нет на сайте
    noTformaT, а какие ты еще хочешь увидеть?..
    noTformaTДата: Четверг, 17 Ноября 2011, 18:37 | Сообщение # 5
    Ukrainian independent game developer
    Сейчас нет на сайте
    Quote (Buran)
    а какие ты еще хочешь увидеть?..

    ну, канвас это только один из восьми кластеров HTML5... Но, в том кластере еще две технологии кроме канваса.

    Я бы хотел что-бы на гцапе были уроки по всем восьми кластерам ХТМЛ5...


    @noTformaT
    Revolver_45Дата: Четверг, 17 Ноября 2011, 20:10 | Сообщение # 6
    почетный гость
    Сейчас нет на сайте
    Quote (noTformaT)
    ммм, как я понял уроки будут посвященные только Канвасу????

    Ну, в общем-то нет. Я попытаюсь затронуть более широкий спектр возможностей HTML5, при этом рассматривая его в первую очередь как средство разработки интерактивных приложений и игр, а не как язык разметки веб-старничек. Собственно мои уроки и будут направлены на написание несложных игрушек в конечном итоге, обходя стороной такие моменты как структура верстки, форматирование текста, создание форм и т.п. Кроме канвы рассмотрим и другие элементы: для мультимедиа - видео и аудио, а также их взаимодействие, хранилище данных, автономную работу, фоновые вычисления и сокеты.


    rtytyrtyr
    Форум игроделов » Дополнительные темы » Вебмастеринг » HTML5 Canvas. Урок 1. (Revolver_45)
    • Страница 1 из 1
    • 1
    Поиск:

    Все права сохранены. GcUp.ru © 2008-2024 Рейтинг