Тег html canvas

Canvas – элемент HTML5 использующийся для рисования двухмерных изображений. Он представляет собой область, в которой можно строить графики, анимацию, рисунки или игры, используя методы js. На первый взгляд, это аналог <img>, но в отличие от данного элемента в нем нет атрибутов alt и src. В некоторых браузерах наблюдаются проблемы с поддержкой CSS, поэтому для корректного отображения анимации, диаграмм или графиков актуально применение html тега canvas.

При помощи <canvas> можно рисовать различные типы кривых, линий, прямоугольников и арок. Существует возможность их комбинирования, что позволяет создавать практически любые формы. При этом допустимо добавлять различные эффекты, например смешивание, градиент, заливка, тени и контуры. Суть использования тега canvas в том, что в нем возможно выполнять рисунки используя JavaScript.

<!-- HTML -->
<canvas id="newcan" width="250" height="250"></canvas>
// JavaScript
var canvas = document.getElementById("newcan");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#50C878"
ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();
ctx.fill();
function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}
Круг при помощи тега html canvas

Также есть возможность вставить и персонализировать текст:

<!-- HTML -->
<canvas id="textcan" width="280" height="280" style="border: 3px solid #F34723;"></canvas>
// JavaScript
var canvas = document.getElementById("textcan");
var ctx = canvas.getContext("2d");
ctx.font = "39px Legendaria"
ctx.fillText("Sample text", 45, 145);
Текст при помощи тега html canvas

У данного тега три основных атрибута – height, width и id. Идентификатор id задает элементу уникальное имя (example), что позволяет проще идентифицировать элемент, и разрешает открыть доступ к языку сценариев. Атрибут height определяет количество символов, которые будет занимать область элемента на веб-странице по вертикали. Аналогично width указывает число точек по горизонтали.

В результате браузер получает сведения, согласно которым выделяет на веб-странице пространство необходимого размера. Стандартный холст принимается размером 150х300 пикселей, если не указать высоту и ширину. Содержимым области, созданной элементом canvas, управляют контексты.

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

Следует учитывать, <canvas> в отличие от <img> необходимо завершать (закрывать) тегом </canvas>. В противном случае остальной контент, представленный в документе, станет считаться запасным и не будет отображаться.

Использование CSS

Есть ли альтернатива применения height и width для обозначения размеров <canvas>? В некоторых случаях высоту и ширину допустимо указывать используя CSS. Но результат может оказаться не таким, как вы рассчитывали.

Стандартный элемент имеет параметры 150х300 пикселей. Если не вводить height и width, то такого размера и будет рисунок. Однако, когда при помощи CSS задается геометрия изображения 200х500, то происходит масштабирование содержимого в canvas размером 150х300 пикселей в соответствии с установленными параметрами.

Это равносильно масштабированию картинки, когда вводится новая ширина и высота, которые существенно отличаются от реальных размеров. При этом наблюдается пикселизация и несиметричность форм (потеря резкости, масштаба и качества изображения).

<!-- HTML -->
<canvas id="csscan" style="border: 7px solid #FF7F50;"></canvas>
/* CSS */
#csscan {
  width: 500px;
  height: 200px;
}
// JavaScript
var canvas = document.getElementById("csscan");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#0047AB"
ctx.arc(150, 75, 50, 0, getRadians(360));
ctx.stroke();
ctx.fill();
function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}
Использование CSS для указания высоты и ширины тега canvas

Аналогично элемент <canvas> высотой 150 пикселей, увеличиваемый до 300 точек будет иметь прежнее количество пикселей, но растянутых в два раза.

Если использовать атрибуты height и width, то у вас появится возможность указывать размеры как больше, так и меньше стандартных, при этом качество изображения не будет страдать. Таким образом применять CSS для указания размеров допустимо только если это оправданно и элемент необходимо сильно масштабировать.

Старые версии браузеров

Некоторые браузеры не поддерживают canvas. Поэтому чтобы информировать пользователей, чьи веб-обозреватели не работают с данными элементами, между открывающим и закрывающим тегом помещают альтернативный контент. Он отобразится, только если браузер не поддерживает canvas. В остальных случаях альтернативный текст будет игнорироваться.

Это несложно и довольно просто реализовать. Необходимо предоставить специальную альтернативную информацию внутри HTML тега <canvas>. Если браузер не работает с данным элементом, то им проигнорируется container, и пользователь получит запасное содержимое тега. Если браузер поддерживает canvas, то он скроет «резервную» надпись или изображение, отобразив только изначальный canvas.

<!-- HTML -->
<!-- Текстовая информация -->
<canvas id="nosupcan" width="210" height="210" style="border: 9px solid #FF00FF;">У вашего браузера нет поддержки тега canvas</canvas>

<!-- Замещающее изображение -->
<canvas id="notsupcan" width="210" height="210"><img scr="tag_can" alt="image"></canvas>
// JavaScript
var canvas = document.getElementById("nosupcan");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#7B68EE"
ctx.fillRect(55,55,100,100)
Альтернативный контент для браузеров, не поддерживающих canvas

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *