Урок №9. Рисование с помощью элемента Canvas в HTML5


      

Урок №9. Рисование с помощью элемента Canvas в HTML5

Степень завершённости урока: 60%   

Для рисования в HTML5 используется специальный тег <canvas>, который, образно говоря, является холстом, на котором можно изобразить круги, квадраты, линии и т.д.

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

На одной веб-странице может присутствовать несколько элементов <canvas>.

Содержимое элемента canvas не является частью объектной модели документа веб-страницы (DOM, Document Object Module).

Давайте создадим файл с расширением html и следующим кодом в качестве каркаса для нашей веб-страницы:

КОД:
<!doctype html>
<html>
   <head>
      <title>Пример использования элемента Canvas</title>
      <meta charset='utf-8'/>
   </head>
   <body>
   </body>
</html>

Далее между тегами <body> и </body> необходимо вставить несколько строчек кода:

КОД:
<canvas height='320' width='480' id='example'> </canvas>
<script>
   var example = document.getElementById("example");
ctx = example.getContext('2d');
ctx.fillRect(0, 0, example.width, example.height);
</script>

Полностью код веб-страницы с нарисованным чёрным прямоугольником выглядит следующим образом:

КОД:
<!doctype html>
<html>
   <head>
      <title>Пример использования элемента Canvas</title>
      <meta charset='utf-8'/>
   </head>
   <body>
<canvas height='320' width='480' id='example'> </canvas>
<script>
   var example = document.getElementById("example");
ctx = example.getContext('2d');
ctx.fillRect(0, 0, example.width, example.height);
</script>
   </body>
</html>

А вот так выглядит сам прямоугольник, нарисованный на холсте с помощью элемента Canvas в HTML5.



      

Страница обновлена 13 ноября 2022 года.