Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
В предыдущих уроках поговорили о семантических тегах для разметки HTML-страницы. В этом уроке поговорим о теге <canvas>.
В HTML5 появилась крутая вещь – элемент canvas. Кратко о сути элемента: создание картинки, то есть <canvas> – это холст для рисования средствами JavaScript. Мы не будем в этом уроке подробно рассматривать рисование средствами JavaScript.
Создадим элемент <canvas> и определим размера холста. Смотрим на пример первый.
<canvas id = "my_canvas" width = "200" height = "200">
<p>Ваш браузер не поддерживает canvas, а жаль.</p>
</canvas>И давайте нарисуем что-нибудь. Смотрим второй пример.
<script>
/* находим наш холст */
var canvas = document.getElementById("my_canvas");
var ctx = canvas.getContext("2d");
/* рисуем */
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
</script>На холсте появится красный квадрат.
Казалось бы, зачем использовать canvas, если можно в фотошопе спокойно нарисовать картинку. Благодаря canvas можно создавать динамические картинки (даже браузерные игры). Ранее использовался flash, для этих целей, теперь canvas. Например, графики, диаграммы и многое другое делают с использованием canvas.
В следующем уроке познакомимся с тегом <audio>.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
