<canvas>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <canvas>
Элемент может быть использован для отрисовки графики через скрипты (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока <canvas>
. Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.
Больше статей о canvas canvas topic page.
Content categories | Flow content, phrasing content, embedded content, palpable content. |
---|---|
Permitted content | Transparent но без interactive content descendants except(соглашаться?) для <a> элементы, <button> элементы, <input> элементы как type атрибут is checkbox , radio , или button . |
Tag omission | Нет, открывающий и закрывающий теги обязательны. |
Permitted parent elements | Any element that accepts phrasing_content. |
DOM interface | HTMLCanvasElement |
Атрибуты
Этот элемент включает global attributes.
height
-
Высота в координатном пространстве в CSS пикселях. По умолчанию 150.
moz-opaque
Non-standard-
Дай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.
width
-
Ширина в координатном пространстве в CSS пикселях. По умолчанию 300.
Описание
Обязательно </canvas>
тег
Определение размеров холста
Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах <canvas>
, и не используя CSS.
Примеры
<canvas id="canvas" width="300" height="300">
Извините, ваш браузер нет поддерживает<canvas> элемент.
</canvas>
Если ваш холст не использует transparency, установите moz-opaque
атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .
<canvas id="mycanvas" moz-opaque></canvas>
Спецификации
Specification |
---|
HTML Standard # the-canvas-element |
Совместимость с браузерами
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.