API Canvas

Элемент <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();

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