Рисование на холсте с помощью Canvas в JavaScript

В этом уроке вы узнаете о холсте HTML и о том, как использовать JavaScript для рисования на холсте.

В HTML5 есть элемент <canvas>, который позволяет рисовать 2D-графику с помощью JavaScript.

Для элемента  <canvas> требуется как минимум два атрибута: width и height, определяющие размер холста:

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

Как и другие элементы, вы можете получить доступ к свойствам width и height элемента <canvas> через его свойства DOM:

const canvas = document.querySelector('#canvas');
 const width = canvas.width;// 500
 const height = canvas.height;// 300

И вы также можете изменить width и height элемента <canvas> с помощью методов DOM:

canvas.width = 600;
 canvas.height = 400;

Резервный контент

В отличие от элемента <img>, для элемента <canvas> требуется закрывающий тег </canvas>. Любое содержимое между открывающим и закрывающим тегами является запасным и будет отображаться только в том случае, если браузер не поддерживает элемент <canvas>.

Пример:

The browser doesn't support the canvas element

В настоящее время большинство современных веб-браузеров поддерживают элемент <canvas>.

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

Изначально холст пустой. Чтобы что-то нарисовать, вам нужно получить доступ к контексту рендеринга и использовать его для рисования на холсте.

Элемент <canvas> имеет метод getContext(), который возвращает объект контекста рендеринга.

getContext() принимает один аргумент, который является типом контекста. Например, вы используете "2d", чтобы получить объект контекста 2D-рендеринга, который является экземпляром интерфейса CanvasRenderingContext2D.

Контекст 2D-рендеринга позволяет рисовать фигуры, текст, изображения и другие объекты.

В следующем примере показано, как выбрать элемент холста с помощью метода querySelector() и получить доступ к контексту рисования, вызвав его метод getContext() :

let canvas = document.querySelector('#canvas');
 let ctx = main.getContext('2d');

Проверка поддержки холста

При использовании элемента <canvas> важно проверить, поддерживает ли браузер метод getContext(). Для этого используйте следующий код:

let canvas = document.querySelector('#main');
if (canvas.getContext) {
    let ctx = main.getContext('2d');
}

2D-контекст

В контексте 2D-рисования представлены методы рисования простых 2D-фигур, таких как контуры, прямоугольники и дуги.

Координаты в 2D-контексте начинаются в левом верхнем углу элемента <canvas>, то есть в точке (0,0), как показано на следующем рисунке:

Все значения координат рассчитываются относительно (0,0) с увеличением x вправо и увеличением y вниз.

По умолчанию width и height определяют количество пикселей, доступных в каждом направлении.

Заливки и штрихи

Заливка и обводка — это две основные операции рисования в контексте 2D-рисования.

• Заливка заполняет фигуру определенным стилем, таким как цвет, градиент и изображение.
• Обводка добавляет цвета к краям фигуры.

fillStyle и strokeStyle контекста 2D-рисования будут определять стили заливки и обводки.

Вы можете установить эти свойства для строки, объекта градиента или объекта шаблона. По умолчанию они оба имеют значение '#000000'.

Ниже показано, как задать стили заливки и обводки для контекста 2D-рисования и нарисовать прямоугольник.

(() = > {
    const canvas = document.querySelector('#main');
    if (!canvas.getContext) {
        return;
    }

    // get the context
    let ctx = canvas.getContext('2d');

    // set fill and stroke styles
    ctx.fillStyle = '#F0DB4F';
    ctx.strokeStyle = 'red';

    // draw a rectangle with fill and stroke
    ctx.fillRect(50, 50, 150, 100);
    ctx.strokeRect(50, 50, 150, 100);

})();

Заключение

• Используйте элемент холста HTML5 для рисования 2D-графики в JavaScript.
• Используйте getContext('2d') для получения контекста 2D-рисования для рисования 2D-графики на холсте.
• Используйте свойства fillStyle и StrokeStyle, чтобы задать стили для контекста 2D-рисования.