Тег <canvas> HTML

  • Предыдущая страница <button>
  • Следующая страница <caption>

Определение и использование

<canvas> Метка обычно рисуется в реальном времени с помощью скрипта (обычно JavaScript).

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

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

Совет

Изучите HTML Canvas в нашем курсе <canvas> Подробнее о элементе.

Чтобы увидеть полную информацию о всех свойствах и методах, пожалуйста, посетите наш Референсное руководство по Canvas HTML.

Инсталляция

Пример 1

Рисуйте в реальном времени красный прямоугольник и покажите его в элементе <canvas>:

<canvas id="myCanvas">
Ваш браузер не поддерживает тег canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Попробуйте сами

Пример 2

Еще один пример <canvas>:

<canvas id="myCanvas">
Ваш браузер не поддерживает тег canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Открываем прозрачность
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Попробуйте сами

Атрибут

Атрибут Значение Описание
height Пиксельные значения Определяет высоту канвы. Значение по умолчанию 150.
width Пиксельные значения Определяет ширину канвы. Значение по умолчанию 300.

Глобальные атрибуты

<canvas> Тег также поддерживает Глобальные атрибуты в HTML.

Событийные атрибуты

<canvas> Тег также поддерживает Событийные атрибуты в HTML.

Стандартные CSS-настройки

Большинство браузеров будут отображать следующие значения по умолчанию <canvas> Элемент:

canvas {
  height: 150px;
  width: 300px;
}

Попробуйте сами

История <canvas>

Этот HTML-элемент спроектирован для клиентов векторной графики. Он сам по себе не имеет поведения, но предоставляет API для рисования клиентской JavaScript, чтобы скрипт мог рисовать все, что он хочет, на одном холсте.

Элемент <canvas> был введен Apple в веб-браузере Safari 1.3. Причина этого радикального расширения HTML заключалась в том, что возможности рисования HTML в Safari также используются компонентом Dashboard в Mac OS X, и Apple хотел иметь возможность поддерживать скриптовые графики в Dashboard.

Firefox 1.5 и Opera 9 последовали примеру Safari. Эти браузеры поддерживают элемент <canvas>.

Мы даже можем использовать элемент <canvas> в IE и использовать для построения совместимого с <canvas>开源 кода JavaScript (инициированного Google) на основе поддержки VML в IE. См. также:http://excanvas.sourceforge.net/.

Стандартизация <canvas> продвигается неформальной ассоциацией производителей веб-браузеров, и в настоящее время <canvas> стал официальным тегом в проекте HTML 5. См. также:http://www.whatwg.org/specs/web-apps/current-work/

Различия между элементом <canvas>, SVG и VML.

Одна из важнейших различий между элементом <canvas>, SVG и VML заключается в том, что <canvas> имеет API рисования на основе JavaScript, а SVG и VML используют XML-документ для описания рисования.

Эти два способа функционально эквивалентны, любым из них можно имитировать другой. С первого взгляда они очень不相同, но у каждого есть свои сильные и слабые стороны. Например, рисование SVG легко редактировать, просто удалив элементы из его описания.

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

как использовать элемент <canvas> для рисования.

большинство API рисования Canvas не определены на самом элементе <canvas>, а определены через рисование на метод.getContext().полученного объекта «окружающей среды рисования».

Canvas API также использует способ представления путей. Однако, путь определяет собой последовательность вызовов методов, а не описание в виде строки из букв и цифр, например, вызовы методов beginPath() и arc().

После определения пути, другие методы, такие как fill(), работают с этим путем. Различные свойства绘图ной среды, такие как fillStyle, объясняют, как выполняются эти действия.

Комментарий:Одной из причин, почему Canvas API так компактен, является то, что он не предоставляет никакой поддержки для рисования текста. Чтобы добавить текст в графическое изображение <canvas>, необходимо либо нарисовать его и объединить с битмап-изображением, либо использовать CSS positioning над <canvas>, чтобы покрыть HTML-текст.

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот элемент.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0
  • Предыдущая страница <button>
  • Следующая страница <caption>