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

0 ∞ 1

Canvas - что это такое? На первый взгляд, элемент <canvas> - это элемент HTML5, который можно использовать для рисования. Он представляет собой лишь контейнер, в котором можно рисовать что-либо с помощью других методов. HTML canvas используется для отображения графиков, диаграмм, анимации и чтобы обойти проблемы с поддержкой CSS в некоторых браузерах.

Что можно рисовать с помощью <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>
С чего начать работу с элементом canvas
Примеры использования HTML5 Canvas

В приведенном выше 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>
Формы в HTML5: CSS
HTML5 Canvas: рисуем прямую линию

В приведенном выше примере 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: рисуем прямую линию - 2

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>
HTML5 Canvas: работа с текстом

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

Иные способы применения

Элемент HTML5 canvas также можно использовать для вставки изображений, градиентов и комплексной анимации.