Canvas API

Canvas и его контекст. Рисование прямоугольников

Последнее обновление: 05.11.2023

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

Пример простейшего определения элемента <canvas> на веб-странице:

<canvas id="canvas" width="500" height="300"></canvas>

Обычно для элемента canvas указывается идентификатор для упрощения его выборки в коде JavaScript. И также часто устанавливаюься атрибуты ширины и высоты (если опустить эти атрибуты, то по умолчанию canvas будет иметь ширину 300 пикселей и высоту 150 пикселей).

Контекст рендеринга

Для управления областью рисования canvas и ее содержимым надо получить контекст рендеринга с помощью метода getContext() элемента canvas:

canvas.getContext(contextId, [config])

В качестве первого обязательного параметра этот метод получает идентификатор контекста, а в качестве второго необязательного параметра - объект конфигурациионных настроек.

Мы можем использовать следующие идентификаторы контекста:

  • 2d: контекст для рендеринга 2D-графики. При передаче этого идентификатора в метод getContext() данный метод возвращает объект типа CanvasRenderingContext2D.

  • webgl: контекст для рендеринга 3D-графики с помощью технологии WebGL версия 1. При передаче этого идентификатора в метод getContext() данный метод возвращает объект типа WebGLRenderingContext.

  • webgl2: контекст для рендеринга 3D-графики с помощью технологии WebGL версия 2. При передаче этого идентификатора в метод getContext() данный метод возвращает объект типа WebGL2RenderingContext.

Стоит отметить, что хотя все современные браузеры более менее поддерживают все три контекста (особенно первые два контекста), но, например, поддержка последнего контекста webgl2 начала внедряться с 2017 года, а в Safari была внедрена самой последней - в 2021 году.

Например, получение контекста 2d для рисования 2D-графики:

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

Поскольку WebGL имеет много специфичных особенностей, то в дальнейшем работу с Canvas API будем рассматривать именно на примере 2D-контекста. Подробнее же про WebGL можно почитать в руководстве по WebGL

Перед тем, как перейти непосредственно к рисованию, стоит понимать, как устроена система координат в canvas:

система координат в canvas в html5 и javascript

2D-контекст основан на двумерной системе координат. Началом этой системы координат является координата (0,0) в верхнем левом углу области рисования. Графические элементы (прямоугольники, круги и т.д.) рисуются в области рисования относительно этой исходной координаты.

Рисование прямоугольников

Для рисования прямоугольников объект CanvasRenderingContext2D доставляет ряд методов:

  • clearRect(x, y, w, h): очищает определенную прямоугольную область, верхний левый угол которой имеет координаты x и y, ширина равна w, а высота равна h

  • fillRect(x, y, w, h): заливает цветом прямоугольник, верхний леый угол которого имеет координаты x и y, ширина равна w, а высота равна h

  • strokeRect(x, y, w, h): рисует контур прямоугольника без заливки его каким-то определенным цветом

Например, нарисуем на веб-странице простейший прямоугольник с помощью fillRect():

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillRect (10, 10, 100, 100);
</script>
</body>
</html>

Здесь заполняем прямоугольную область шириной в 100 пикселей и высотой также в 100 пикселей, левый верхний угол которой расположен в точке (x=10, y=10).

рисование прямоугольника в javascript с помощью метода fillRect

По умолчанию для заливки применяется черный цвет. В следующей статье мы посмотрим, как можно установить цвет.

Метод fillRect() заполняет область без рисования границы, метод strokeRect, наоборот, рисует только границу. Например, изменим код javascript следующим образом:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.strokeRect (10, 10, 100, 100);
рисование прямоугольника в javascript с помощью метода strokeRect

Здесь рисуем прямоугольник с аналогичными координатами, шириной и высотой, только с одной границей и без заливки. Также по умолчанию для цвета контура применяется черный цвет.

В отличие от strokeRect и fillRect метод clearRect очищает определенную область, Фактически эта область приобретатет тот цвет, который у нее был бы, если бы к ней не применялись функции strokeRect и fillRect. Например:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillRect (10, 10, 100, 100);
context.clearRect(15, 15, 90, 90);

В данном случае сначала заливаем черным цветом прямоугольную область, затем внутри нее с помощью clearRect очищаем меньшую прямоугольную область:

рисование прямоугольника в javascript с помощью метода clearRect

Подобным образом мы можем создавать и более сложные композиции:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillRect (10, 10, 80, 80);            // Рисуем голову  
context.clearRect (20, 20, 60, 20);           // Оцищаем место для глаз    
context.fillRect (30, 25, 10, 10);            // Рисуем левый глаз    
context.fillRect (60, 25, 10, 10);            // Рисуем правый глаз      
context.clearRect (25, 60, 50, 10);           // Рисуем рот
рисование прямоугольников в javascript на canvas

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850