HTML5 - тег <canvas>. Урок 35. Новый тег <canvas> (Канвас) создает виртуальный планшет, на котором затем с помощью программ на Javascript можно рисовать графики. Сам по себе элемент <canvas> есть всего лишь пустой контейнер, зарезервированное место для графиков. Для создания конкретных графиков следует использовать Javascript. Канвас имеет несколько методов для рисования линий, прямоугольников, окружностей, букв, добавления изображений и т.д.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
35. HTML5 - тег <canvas>.
Новый тег <canvas> (Канвас) создает виртуальный планшет, на котором затем с помощью программ на Javascript можно рисовать графики.
Сам по себе элемент <canvas> есть всего лишь пустой контейнер, зарезервированное место для графиков. Для создания конкретных графиков следует использовать Javascript.
Канвас имеет несколько методов для рисования линий, прямоугольников, окружностей, букв, добавления изображений и т.д.
Канвас использует точечное рисование. В Канвасе, когда график закончен, он забыт для браузера. Если необходимо что-то поменять, вся сцена полностью должна быть перерисована, включая все объекты, которые созданы графически.
Основные особенности Канваса:
В обоих случаях мы используем тег canvas (Канвас) следующим образом:
<canvas id="canvas_name" width="800" height="600"></canvas> Пояснения:
Рисунок-набросок с возможностью развития сюжета до мини-игры (название "Русалка" или "Российское посольство в Тринидаде").
Предвидя ваш вопрос по данному рисунку "а где русалка-то?", я заранее подготовил ответ.
Перед тем как посмотреть второй пример использования тега <canvas></canvas>, обратите внимание, что начальной точкой ответа (т.е. точкой с координатами 0,0) является левый верхний угол.
Это неудобно для построения графиков математических функций, т.к. со школы мы привыкли считать начальной точкой центральную. Противоречие вполне понятно, т.к. школьная доска - это одно, а окно браузера с возможностью прокрутки вниз - это другое. В тоже время, сам Канвас сильно напоминает статичную школьную доску, т.к. параметры ширины и высоты в нем жестко определяются. В примере ниже проблема решена несколько искусственно, но решена, точка ответа находится ровно посередине.
Канвас с отображением нескольких математических функций.
В виде практического задания, предлагаю считать этот тестовый пример заготовкой и довести ее до уровня промышленного использования. Для этого обеспечьте возможность ввода учеником (учителем) любой функции и отображения ее на графике. После этого функционал можно внедрять в учебных заведениях для использования на уроках математики.
Разумеется, данный функционал можно адаптировать для построения таких графиков как, например, 'Курс доллара по отношению к рублю', 'Рост населения Китая по годам', 'Рост внешнего долга США' и т.д., и т.д.
Посмотреть тестовый пример можно здесь:
paint.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
math.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_035.zip ← скачайте пример, чтобы установить на свой сайт...
Сам по себе элемент <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).
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