0 ∞ 1

HTML5 Canvas: что это такое?

Canvas – это мощный инструмент для рисования и создания графики на веб-страницах с использованием HTML5. В статье вы узнаете, что скрывается за этим понятием и как его применить в веб-разработке.

Мы объясним, как работать с этим элементом, а также покажем, как с помощью Canvas создавать интерактивные элементы и визуальные эффекты.

Обновлено: 2025-06-25 03:55:33 ВС Валентин Сейидовавтор материала

Примеры использования HTML5 Canvas
HTML5 Canvas: рисуем прямую линию
HTML5 Canvas: работа с текстом
Иные способы применения

Примеры использования HTML5 Canvas

Создадим простую фигуру при помощи элемента <canvas>. Код будет достаточно простым:

<!DOCTYPE html>
<html>
<body>

<p>Не будь квадратом!</p>

<canvas id="squareCanvas" width="400" height="400" style="border:10px solid #000000;">

</canvas>

</body>
</html>

В данном примере мы сначала выводим надпись, а после нее размещаем фигуру при помощи элемента canvas: ширина и высота получились по 400, а ширина границы 10 пикселей. В результате мы получаем большой квадрат с толстым контуром.

Суть HTML 5 canvas кроется в возможности рисовать при помощи JavaScript. С помощью приведенного ниже кода мы создаем холст размером 500 на 500 пикселей с желтой границей толщиной 10 пикселей. Затем при помощи JavaScript в центре холста «рисуем» черный квадрат:

<!DOCTYPE html>
<html>
<body>
<h3>Черный квадрат на желтом холсте от James Payne</h3>
<canvas id="squareCanvas" width="500" height="500" style="border:10px solid #FFFF00;">

</canvas>

<script>
var art = document.getElementById("squareCanvas");
var stylish = art.getContext("2d");
stylish.fillStyle = "#000000";
stylish.fillRect(125,125,250,250);
</script>

</body>
</html>

В приведенном выше HTML canvas примере fillStyle сообщает браузеру, каким цветом нужно залить наш рисунок. Тем временем fillRect определяет местоположение и размер рисунка в рамках нашего холста, которому мы дали имя "squareCanvas ".

У вас есть четыре координаты, которые нужно заполнить. Первое число (125) сообщает браузеру, с какого количества пикселей должно начаться изображение. Если заменить цифру на 0, то изображение отобразится сначала холста. Второе число (также 125) сообщает браузеру, каким будет отступ от верхней границы.

Но вы можете рассматривать эти координаты следующим образом. Четыре координаты указывают на начало каждой из четырех точек. Все, что между этими четырьмя точками, будет закрашиваться в соответствии с настройками fillStyle.

HTML5 Canvas: рисуем прямую линию

Линии рисовать еще проще. В данном примере мы снова нарисуем квадрат. После чего добавим скрипт, который нарисует прямую линию через центр холста сверху вниз:

<!DOCTYPE html>
<html>
<body>

<canvas id="lineCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>

<script>
var line_example = document.getElementById("lineCanvas");
var straight = line_example.getContext("2d");
straight.moveTo(100,0);
straight.lineTo(100,200);
straight.stroke();
</script>

</body>
</html>

В приведенном выше примере HTML canvas moveTo(100,0) указывает начальную точку для линии. LineTo(100,200) – это параметр, в котором мы указываем конечную точку линии. Метод stroke() позволяет указать тип заливки линии. В данном случае мы оставляем этот параметр пустым, что дает нам простую черную линию.

Но если нам нужно будет добавить еще одну линию? Мы просто добавляем координаты второй линии в следующим образом:

<!DOCTYPE html>
<html>
<body>

<canvas id="lineCanvas" width="200" height="200" style="border:1px solid #000000;">
</canvas>

<script>
var line_example = document.getElementById("lineCanvas");
var straight = line_example.getContext("2d");
straight.moveTo(100,0);
straight.lineTo(100,200);
straight.stroke();

var line_example2 = document.getElementById("lineCanvas");
var straight2 = line_example2.getContext("2d");
straight2.moveTo(0,100);
straight2.lineTo(200,100);
straight2.stroke();
</script>

</body>
</html>

HTML5 Canvas: работа с текстом

Кроме фигур элемент HTML canvas также позволяет создавать тексты. Рассмотрим пример с использованием шрифта Arial в размере 32px:

<!DOCTYPE html>
<html>
<body>

<canvas id="textCanvas" width="200" height="200" style="border:10px solid #000000;">
</canvas>

<script>
var example_text = document.getElementById("textCanvas");
var my_text = example_text.getContext("2d");
my_text.font = "32px Arial";
my_text.fillText("My Text",50,100);
</script>

</body>
</html>

В этом случае text.font позволяет указать размер и шрифт текста. У fillText имеется несколько параметров: первый – это текст, который вы хотите «нарисовать», а второй и третий отвечают за оси X и Y. Цифра 50 в приведенном выше коде определяет начальную точку вывода текста с левой стороны холста, цифра 100 отвечает за отступ от верхней границы холста.