canvas

Для чего в html canvas

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

Атрибуты тега :

Примеры использования

Для чего использовать тег

• Для игр с анимацией, графикой и интерактивностью.
• Для визуализации данных: диаграмм, графиков и схем.
• Для интерактивных карт, которые можно увеличивать или уменьшать, а также с интерактивными элементами — всплывающими окнами и маркерами.
• Для фильтров изображений. Например, можно менять яркость, контраст и оттенок.
• Для создания цифрового искусства.
• Для анимации, которая запускается при взаимодействии с пользователем или зависит от времени.
• Для образовательных ресурсов: симуляторов, интерактивных викторин и учебников.

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

Нюансы

• Если атрибуты width или height имеют значение 0 или отрицательное значение, содержимое не будет отображаться на странице.
• Если атрибут id не указан, на нельзя ссылаться в JavaScript.

🖼️ Другие теги для графики и мультимедиа

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Для чего в html canvas

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

Синтаксис

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

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

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

HTML5 IE 8 IE 9 Cr Op Sa Fx

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

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

Canvas

Элемент , добавленный в HTML5, предназначен для создания графики с помощью JavaScript. Например, его используют для рисования графиков, создания фотокомпозиций, анимаций и даже обработки и рендеринга видео в реальном времени.

«Canvas» в переводе с английского означает «холст».

Приложения от Mozilla поддерживают начиная с Gecko 1.8 (т.е. с Firefox 1.5 (en-US) ). Этот элемент первоначально был представлен Apple для OS X Dashboard и Safari. Internet Explorer поддерживает начиная с 9 версии; для более ранних версий IE поддержку для можно добавить с помощью скрипта из проекта Google’s Explorer Canvas. Google Chrome и Opera 9 также поддерживают .

Элемент также используется технологией WebGL для отрисовки аппаратно-ускоренной 3D-графики на веб-страницах.

Пример

Это простой пример использования CanvasRenderingContext2D.fillRect() метода.

HTML

JavaScript

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); 

Отредактируйте код ниже, чтобы увидеть результат на холсте.

canvas id="canvas" width="400" height="200" class="playable-canvas">canvas> div class="playable-buttons"> input id="edit" type="button" value="Edit" /> input id="reset" type="button" value="Reset" /> div> textarea id="code" class="playable-code"> ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100);textarea> 

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas()  ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); > reset.addEventListener("click", function()  textarea.value = code; drawCanvas(); >); edit.addEventListener("click", function()  textarea.focus(); >) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); 

Справочные материалы

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasPattern
• ImageBitmap
• ImageData
• TextMetrics (en-US)
• Path2D (en-US) Экспериментальная возможность

Интерфейсы, связанные с WebGLRenderingContext , ссылаются на WebGL.

Руководства

Подробный учебник, охватывающий как основное использование , так и его расширенные функции.

Некоторые фрагменты кода, ориентированные на разработчиков, с использованием .

Демо анимации трассировки-лучей используя canvas.

Как рисовать DOM контент, таких как HTML-элементы, в canvas.

Ресурсы

Основное

Библиотеки

• Fabric.js это canvas библиотека с открытым исходным кодом с возможностями SVG парсинга.
• Kinetic.js это canvas библиотека с открытым исходным кодом ориентированная на интерактивность для настольных и мобильных приложений.
• Paper.js это программируемый фреймворк векторной графики с открытым исходным кодом который запускается на HTML5 Canvas.
• libCanvas это мощный и лёгкий canvas фреймворк.
• Processing.js является портом языка обработки визуализации.
• PlayCanvas игровой движок с открытым исходным кодом.
• Pixi.js игровой движок с открытым исходным кодом.
• PlotKit библиотека создание графиков и графики.
• Rekapi API анимации для canvas.
• PhiloGL WebGL фреймворк для визуализации данных, для креативного написания кода и разработки игр.
• JavaScript InfoVis Toolkit создаёт интерактивные 2D Canvas визуализации данных для интернета.

Спецификации

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

Found a content problem with this page?

This page was last modified on 8 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Руководство по 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 , который создаёт графику динамически.

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

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

• 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?

This page was last modified on 8 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Для чего в html canvas

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

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> 

Спецификации

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

BCD tables only load in the browser

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

Found a content problem with this page?

This page was last modified on 21 июн. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

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

Источник