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

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

Базовый пример Этот простой пример рисует зеленый прямоугольник на холсте.

HTML HTML Играть Скопировать в буфер обмена

<canvas id=«canvas»></canvas> JavaScript Метод Document.getElementById()получает ссылку на <canvas>элемент HTML. Затем HTMLCanvasElement.getContext()метод получает контекст этого элемента — объект, на котором будет отображаться рисунок.

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

JS Играть Скопировать в буфер обмена

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 Экспериментальный Примечание. Интерфейсы, связанные с ними WebGLRenderingContext, указаны в разделе WebGL .

Примечание: OffscreenCanvas также доступно в веб-воркерах.

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

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

Глубокое погружение в HTML5 Canvas Практическое введение в Canvas API и WebGL длиной в книгу.

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

Манипулирование видео с помощью холста Объединение <video>и <canvas>манипулирование видеоданными в реальном времени.

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

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