Все о html canvas

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.

Источник

Все о 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.

Источник

Базовое использование Canvas

Он выглядит как элемент , но его отличие в том, что он не имеет атрибутов src и alt . Элемент имеет только два атрибута — ширину и высоту. Оба они не обязательны и могут быть выставлены с использованием свойств DOM (en-US) . Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной 300 пикселей и в высоту 150 пикселей. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.

Примечание: Если вид вашего изображения кажется вам искажённым, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах , а не с помощью CSS.

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

Элемент может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.

Запасное содержимое

Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент , вам следует предоставить запасное содержимое для отображения этими браузерами.

Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента . Браузеры, которые не поддерживают проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают проигнорируют запасное содержимое, и просто нормально отобразят canvas.

Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:

canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 canvas> canvas id="clock" width="150" height="150"> img src="images/clock.png" width="150" height="150" alt=""/> canvas> 

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

Требуется тег

Если запасной контент не нужен, простой полностью совместим со всеми браузерами, что поддерживают canvas.

Рендеринг содержимого (контекста)

Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент имеет метод getContext() , используется для получения контекста визуализации и её функции рисования. getContext() принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку «2d».

var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); 

В первой строке скрипта мы получаем узел нашего холста , далее с помощью document.getContext() метода мы присваиваем ему контекст. Имея узел элемента , вы всегда можете получить для рисования контекст при помощи метода getContext() .

Проверка поддержки

var canvas = document.getElementById('tutorial'); if (canvas.getContext) var ctx = canvas.getContext('2d'); // drawing code here > else  // canvas-unsupported code here > 

Скелет шаблона

Здесь минимальный шаблон, который мы будем использовать как начальную точку для дальнейших примеров.

Примечание: вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.

DOCTYPE html> html> head> title>Canvas tutorialtitle> script type="text/javascript"> function draw() var canvas = document.getElementById('tutorial'); if (canvas.getContext) var ctx = canvas.getContext('2d'); > > script> style type="text/css"> canvas  border: 1px solid black; > style> head> body onload="draw();"> canvas id="tutorial" width="150" height="150">canvas> body> html> 

Скрипт вызывает функцию draw(), которая выполнится, когда страница закончит загрузку. Это делается путём события load (en-US) в документе. Эта функция может быть вызвана как единожды, так и с помощью данных методов window.setTimeout() (en-US), window.setInterval() (en-US), или любым другим обработчиком события, когда страница будет загружена.

Вот как шаблон будет выглядеть в действии.

Простой пример

Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.

DOCTYPE html> html> head> script type="application/javascript"> function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); > > script> head> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html> 

Found a content problem with this page?

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

Your blueprint for a better internet.

Источник