Что такое канва в html 5
Перейти к содержимому

Что такое канва в html 5

  • автор:

Что такое канва в html 5

HTML Элемент может быть использован для отрисовки графики через скрипты (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока . Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.

Больше статей о canvas canvas topic page.

Content categories (en-US) Flow content (en-US) , phrasing content (en-US) , embedded content (en-US) , palpable content.
Permitted content Transparent но без interactive content (en-US) descendants except(соглашаться?) для элементы, элементы, элементы как type атрибут is checkbox , radio , или button .
Tag omission Нет, открывающий и закрывающий теги обязательны.
Permitted parent elements Any element that accepts phrasing_content (en-US) .
DOM interface HTMLCanvasElement

Атрибуты

Высота в координатном пространстве в CSS пикселях. По умолчанию 150.

Дай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.

Ширина в координатном пространстве в CSS пикселях. По умолчанию 300.

Описание

Обязательно тег

Определение размеров холста

Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах , и не используя 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

Смотрите также

  • MDN canvas portal
  • Canvas tutorial
  • Canvas cheat sheet
  • Canvas-related demos
  • Canvas introduction by Apple

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Что такое канва в html 5

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

Синтаксис

Атрибуты

height Задает высоту холста. По умолчанию 300 пикселов. width Задает ширину холста. По умолчанию 150 пикселов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE 8 IE 9 Cr Op Sa Fx

   canvas     

Ваш браузер не поддерживает рисование.

Результат примера в браузере Opera показан на рис. 1.

Вывод рисунка с помощью тега <canvas></p>
<p>» width=»400″ height=»299″ /></p><div class='code-block code-block-10' style='margin: 8px 0; clear: both;'>
<!-- 10dvdigital -->
<script src=

Рис. 1. Вывод рисунка с помощью тега

Руководство по Canvas

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

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

Впервые использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с . Тег часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

Прежде чем начать

Работа с элементом довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов height и width . Для рисования графики мы будем использовать javascript context object , который создаёт графику динамически.

В этом руководстве

  • Базовое использование
  • Рисование форм (en-US)
  • Использование изображений (en-US)
  • Применение стилей и цветов (en-US)
  • Трансформации (en-US)
  • Композирование и обрезка (en-US)
  • Базовое анимирование (en-US)
  • Оптимизация canvas (en-US)

Смотрите Также

  • Canvas topic page
  • Drawing Graphics with Canvas (en-US)
  • Canvas examples
  • HTML5 Tutorial
  • Drawing Text Using a Canvas (en-US)
  • Adding Text to Canvas
  • Canvas Drawing and Animation Application
  • Interactive canvas tutorial
  • HTML5CanvasTutorials
  • How to draw N grade Bézier curves with the Canvas API
  • W3C Standard

Примечание для помощников

Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 7 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Канва

Начнем сразу с первой концепции, на основе которой работает программируемая графика HTML 5 и которую нам нужно уяснить. Все рисование выполняется в особом элементе Web-страницы, еще нам не встречавшемся, — в канве (ее еще называют холстом). В других элементах (абзацах, заголовках, таблицах, графических изображениях и пр.) программное рисование не работает.

Канву создают с помощью парного тега :

Мы уже знаем, что рисование в канве выполняется программно, в Web-сценарии. А перед тем как что-то нарисовать, нам придется получить доступ к канве. Сделать это проще всего через имя, заданное атрибутом тега ID. Именно поэтому данный атрибут тега помечен здесь как обязательный.

Необязательные атрибуты тега WIDTH и HEIGHT задают, соответственно, ширину и высоту канвы в пикселах (по умолчанию 300 150 пикселов).

ВНИМАНИЕ!

Задавать размеры канвы с помощью стилей CSS не рекомендуется.

Вот HTML-код, создающий на странице канву cnv размером 400 300 пикселов:

Канва представляется как экземпляр объекта Web-обозревателя HTMLCanvasElement, производный от объекта HTMLElement. Для нас будет полезен только единственный метод этого объекта, который мы скоро рассмотрим.

Добавить комментарий

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