72. Создание холста в HTML5 с помощью тега CANVAS

В предыдущих уроках поговорили о семантических тегах для разметки 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

1. Практики нет, просто нажмите "Проверить задание".

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.