Объект Canvas в DOM HTML

Элемент <canvas> определяет область битмапа на странице HTML.

API Canvas позволяет JavaScript рисовать графики на канвасе.

API Canvas позволяет рисовать фигуры, линии, кривые, прямоугольники, текст и изображения, а также выполнять цветовые операции, вращение, прозрачность и другие операции с像素ами.

Добавление Canvas в HTML

Вы можете добавить элемент canvas в любое место HTML страницы с помощью тега <canvas>:

Пример

<canvas id="myCanvas" width="300" height="150"></canvas>

Попробуйте сами

Как访问 Canvas элемент

Вы можете использовать метод HTML DOM getElementById() для доступа к элементу <canvas>:

const myCanvas = document.getElementById("myCanvas");

Чтобы нарисовать на канвасе, вам нужно создать объект 2D контекста:

const ctx = myCanvas.getContext("2d");

Заметка

Элемент HTML <canvas> сам по себе не имеет функциональности рисования.

Вы должны использовать JavaScript для рисования любых графиков.

Метод getContext() возвращает объект с инструментами рисования (методами).

Рисование на канвасе

После создания объекта 2D контекста вы можете рисовать на канвасе.

Ниже метод fillRect() нарисовал черный прямоугольник, верхний левый угол которого находится в положении 20,20. Ширина прямоугольника 150 пикселей, высота 100 пикселей:

Пример

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Попробуйте сами

Использование цвета

fillStyle свойство устанавливает цвет заливки объекта рисования:

Пример

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Попробуйте сами

Вы также можете использовать метод document.createElement() для создания нового элемента <canvas> и добавления его в существующую HTML-страницу:

Пример

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Попробуйте сами

Путь

Обычные методы рисования на канвасе:

1. Начать путь - beginPath()
2. Переместиться к точке - moveTo()
3. Рисовать в пути - lineTo()
4. Рисовать путь - stroke()

Пример

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Попробуйте сами