Per koci ru ad astra!

Курс HTML :: HTML5 - тег <canvas>. Урок 35.

Настройка сайта

Проверка javascript.

Светофор, свет красный

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

Вероятные причины проблемы: в настройках браузера отключена возможность выполнения javascript и/или в данный момент имеются проблемы подключения к Интернету.

Решение проблемы: устраните причины, указанные выше и нажмите CTRL-F5 для перезагрузки софта и контента этой странички.

Должно помочь.


Рекомендую курсы
Рекомендаций не видно по причине отключенного javascript.


Домен inumo.ru


Урок 35. HTML5 - тег <canvas>.
HTML - основа основ Интернета. Базовый курс. HTML5 - тег <canvas>. Урок 35. Новый тег <canvas> (Канвас) создает виртуальный планшет, на котором затем с помощью программ на Javascript можно рисовать графики. Сам по себе элемент <canvas> есть всего лишь пустой контейнер, зарезервированное место для графиков. Для создания конкретных графиков следует использовать Javascript. Канвас имеет несколько методов для рисования линий, прямоугольников, окружностей, букв, добавления изображений и т.д.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
35. HTML5 - тег <canvas>.
Новый тег <canvas> (Канвас) создает виртуальный планшет, на котором затем с помощью программ на Javascript можно рисовать графики.

Сам по себе элемент <canvas> есть всего лишь пустой контейнер, зарезервированное место для графиков. Для создания конкретных графиков следует использовать Javascript.

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

Канвас использует точечное рисование. В Канвасе, когда график закончен, он забыт для браузера. Если необходимо что-то поменять, вся сцена полностью должна быть перерисована, включая все объекты, которые созданы графически.

Основные особенности Канваса:
  • Зависимость от разрешения монитора - Отображение Канваса зависит от разрешения монитора (Resolution dependent).
  • Не поддерживается управление событиями - В Канвасе не поддерживается управление событиями (No support for event handlers).
  • Слабые возможности работы с текстом - В Канвас можно вводить текстовую информацию, но поддержка манипуляции с текстовой информацией низкая (Poor text rendering capabilities).
  • Возможность экспорта в графические файлы - Вы можете сохранить текущий Канвас, отображенный на экране в графические файлы, например, .png или .jpg - кликните правой кнопкой мыши в любое место на Канвасе и затем сделайте выбор нужного пункта в меню (You can save the resulting image as .png or .jpg).
  • Хороший инструментарий для разработчиков игр - Канвас является отличным инструментарием для создания игр в браузере, которые интенсивно используют графику (Well suited for graphic-intensive games).
Теперь попробуем набросать пару примеров практического использования Канваса.

В обоих случаях мы используем тег canvas (Канвас) следующим образом:
<canvas id="canvas_name" width="800" height="600"></canvas> Пояснения:
  • <canvas></canvas> - тег canvas является парным.
  • id="canvas_name" - обязательный реквизит, далее используется программой JavaScript для идентификации Канваса. На одной страничке может быть несколько Канвасов.
  • width="800" - определяет ширину Канваса.
  • height="600" - определяет высоту Канваса. Строго говоря, данные реквизиты (ширина и высота) не являются обязательными, но я настоятельно их использовать, т.к. если их нет, то используются странные значения по умолчанию.
  • начальная точка Канваса - это левая верхняя точка и она имеет координаты (0, 0).
  • конечная точка Канваса - это правая нижняя точка и она имеет координаты (width, height).
Ключевые моменты программы на Javascript:
var paint_c=document.getElementById("paint_ctx");
var paint_ctx=paint_c.getContext("2d");
// рисовать будем в теге с id="paint_ctx" и наш объект для рисования paint_ctx...
var HorLineY=300;
// линия горизонта - 300 точек сверху...
paint_ctx.fillRect(0,0,800,300);
// рисуем небо...
paint_ctx.fillRect(0,300,800,600);
// рисуем море...
paint_ctx.arc(600,HorLineY,100,1*Math.PI,2.0*Math.PI);
// рисуем солнце...
paint_ctx.arc(10,800,460,1*Math.PI,2.0*Math.PI);
// остров слева...
// ...
// полные тексты программ, смотрите в архиве, ссылка ниже...



Рисунок-набросок с возможностью развития сюжета до мини-игры (название "Русалка" или "Российское посольство в Тринидаде").



Предвидя ваш вопрос по данному рисунку "а где русалка-то?", я заранее подготовил ответ.

Перед тем как посмотреть второй пример использования тега <canvas></canvas>, обратите внимание, что начальной точкой ответа (т.е. точкой с координатами 0,0) является левый верхний угол.

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

Канвас с отображением нескольких математических функций.



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

Разумеется, данный функционал можно адаптировать для построения таких графиков как, например, 'Курс доллара по отношению к рублю', 'Рост населения Китая по годам', 'Рост внешнего долга США' и т.д., и т.д.

Посмотреть тестовый пример можно здесь:
paint.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
math.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_035.zip ← скачайте пример, чтобы установить на свой сайт...


*** Машина-Функционал для передвижения по страничкам курса HTML ***
:: :: /

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

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Где-где! На дне! ;-)

Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок_02 :: Урок_03 :: Урок_04 :: Урок_05 :: Урок_06 :: Урок_07 :: Урок_08 :: Урок_09 :: Урок_10 :: Урок_11 :: Урок_12 :: Урок_13 :: Урок_14 :: Урок_15 :: Урок_16 :: Урок_17 :: Урок_18 :: Урок_19 :: Урок_20 :: Урок_21 :: Урок_22 :: Урок_23 :: Урок_24 :: Урок_25 :: Урок_26 :: Урок_27 :: Урок_28 :: Урок_29 :: Урок_30 :: Урок_31 :: Урок_32 :: Лаба_2 :: Урок_33 :: Урок_34 :: Урок_35

Следующие странички, рекомендуемые для посещения и изучения:
Урок 36

Страничка сделана на основе контента курса HTML сайта kocby.ru

© KOCI.INUMO.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCI.INUMO.RU ©