API холста

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

API холста в основном фокусируется на 2D-графике. API WebGL, который также использует элемент <canvas>, рисует ускоренную графику 2D и 3D.

В этом простом примере рисуется зелёный прямоугольник на холсте.

Метод Document.getElementById() получает ссылку на элемент HTML <canvas>. Далее, метод HTMLCanvasElement.getContext() получает контекст этого элемента — область, на которую будет наноситься отрисовка.

Фактическая отрисовка выполняется с помощью интерфейса CanvasRenderingContext2D. Свойство fillStyle делает прямоугольник зелёным. Метод fillRect() размещает его верхний левый угол в точке (10, 10) и задаёт размеры 150 пикселей в ширину и 100 пикселей в высоту.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasPattern
• ImageBitmap
• ImageData
• TextMetrics
• OffscreenCanvas
• Path2D Экспериментальная
• ImageBitmapRenderingContext Экспериментальная

CanvasCaptureMediaStreamTrack — это связанный интерфейс.

Учебное пособие по холсту

Подробное руководство, охватывающее как базовое использование API холста, так и его расширенные возможности.

HTML5 Canvas Deep Dive

Практическое руководство для изучения API холста и WebGL.

Справочник по холсту

Удобный справочник по API холста.

Обработка видео с помощью холста

Сочетание <video> и <canvas> для обработки данных видео в реальном времени.

API холста очень мощный, но не всегда простой в использовании. Перечисленные ниже библиотеки могут ускорить и упростить создание проектов на основе холста.

• EaselJS — это открытая библиотека холста, которая упрощает создание игр, генерируемого искусства и других графически насыщенных опытов.
• Fabric.js — это открытая библиотека холста с возможностью парсинга SVG.
• heatmap.js — это открытая библиотека для создания карт данных на основе холста.
• JavaScript InfoVis Toolkit создает интерактивную визуализацию данных.
• Konva.js — это 2D-библиотека холста для настольных и мобильных приложений.
• p5.js имеет полный набор функций рисования на холсте для художников, дизайнеров, педагогов и новичков.
• Paper.js — это открытый векторный графический фреймворк, работающий поверх HTML Canvas.
• Phaser — это быстрый, бесплатный и увлекательный открытый фреймворк для игр на холсте и WebGL.
• Pts.js — это библиотека для креативного программирования и визуализации на холсте и в SVG.
• Rekapi — это API анимации для ключевых кадров на холсте.
• Scrawl-canvas — это открытая JavaScript-библиотека для создания и управления 2D-элементами холста.
• Фреймворк ZIM предоставляет удобства, компоненты и элементы управления для кодирования творчества на холсте — включает доступность и сотни красочных учебных пособий.
• Sprig — это простая в использовании открытая библиотека для разработки игр на основе плиток, использующая холст.

• WebGL