В этом уроке вы узнаете о холсте 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-рисования.