Canvas

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

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

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

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

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

js
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);

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

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

Руководства

Canvas tutorial

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

Фрагменты кода: Canvas

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

Drawing DOM objects into a canvas

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

Manipulating video using canvas

Объединяет <video> и <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 визуализации данных для интернета.

WebGL

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 17 дек. 2024 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

Canvas

In this article

Пример

HTML

JavaScript

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

Руководства

Ресурсы

Основное

Библиотеки

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

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

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

Help improve MDN