Рисование с помощью javascript

Рисование в JavaScript (canvas)

В HTML5 есть тег canvas, который создаёт поле для рисования. На нём можно рисовать с помощью скриптов JavaScript. Разберём как это работает.

Подготовка поля для рисования

Теперь с помощью JavaScript надо обратиться к этому полю. Сначала получим ссылку на него через getElementById а затем создадим объект, в котором будет находиться так называемый «контекст», через методы которого будем рисовать:

Теперь обращаясь к методам в объекте ctx можно рисовать различные фигуры в пределах области canvas. Попробуем сделать это.

Рисование линий

ctx.moveTo(50, 100); ctx.lineTo(150, 100);

• Первая команда beginPath говорит о том, что надо приготовиться к рисованию.
• Вторая команда moveTo(50, 50) говорит о том, куда JavaScript должен поставить свой карандаш, откуда начнётся рисование. В скобках задаётся горизонтальная и вертикальная координата в пикселях (от левого верхнего края canvas). В нашем случае это точка находится на расстоянии 100 пикселей от верхнего и левого края.
• Третья команда lineTo(150, 50) говорит о том, куда JavaScript должен тянуть свой карандаш. В скобках задаётся горизонтальная и вертикальная координата в пикселях. В нашем случае это точка находится на расстоянии 100 пикселей от верхнего края и 150 от левого. То есть получится горизонтальная линия по центру canvas.
• Последняя четвёртая команда stroke говорит, что надо закончить рисование.

Линия рисуется непрерывно, пока не выполнена команда stroke. Поэтому можно нарисовать фигуру, используя команду lineTo несколько раз подряд. Давайте сделаем это и нарисуем квадрат:

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // линия вправо ctx.lineTo(150, 150); // линия вниз ctx.lineTo(50, 150); // линия влево ctx.closePath(); // смыкание начала и конца рисунка (левая стена) ctx.stroke(); 

Чтобы нарисовать квадрат, нужно нарисовать 4 линии. Но в примере кода мы заменили последний метод lineTo на closePath, которая рисует линию, автоматически вычисляя нужные координаты, чтобы сомкнуть её с началом рисунка. Таким образом чтобы нарисовать последнюю (левую) сторону квадрата мы использовали не lineTo(50, 50), а просто closePath().

Чтобы изменить цвет линии, используем метод strokeStyle, которому передадим нужный цвет в обычном CSS формате (название цвета, HEX или RGB форматы). Чтобы изменить толщину линии необходимо использовать метод lineWidth, которому необходимо задать толщину линии в пикселях. Оба этих значениия (цвет и толщина) должны быть заданы до вызова метода stroke (который стоит в последней строчке примера):

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // линия вправо ctx.lineTo(150, 150); // линия вниз ctx.lineTo(50, 150); // линия влево ctx.closePath(); // смыкание начала и конца рисунка (левая стена) ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет ctx.lineWidth = 5; // толщина линии в 5px ctx.stroke(); 

Заливка рисунка

Попробуем разукрасить полученный квадрат не чёрным цветом, а синим. Для этого надо использовать метод fill. Точно так же как и изменение цвета/толщины линий, этот метод должен быть вызван до вызова метода stroke (который стоит в последней строчке примера).

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // линия вправо ctx.lineTo(150, 150); // линия вниз ctx.lineTo(50, 150); // линия влево ctx.closePath(); // смыкание начала и конца рисунка (левая стена) ctx.fill(); // закрашивание фигуры ctx.stroke(); 

Не обязательно, чтобы фигура была закончена и «закрыта». То есть можно не ставить closePath, а нарисовать три стороны и применить закрашивание fill, тогда всё равно закрасится именно нужная область:

Чтобы изменить цвет заливки, используем метод fillStyle, которому передадим нужный цвет в обычном CSS формате (название цвета, HEX или RGB):

ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); // линия вправо ctx.lineTo(150, 150); // линия вниз ctx.lineTo(50, 150); // линия влево ctx.closePath(); // смыкание начала и конца рисунка (левая стена) ctx.fillStyle = '#1a2edb'; // тёмно-синий цвет ctx.fill(); ctx.stroke(); 

Рисование окружностей

• Горизонтальную координату центра окружности на canvas (в пикселях)
• Вертикальную координату центра окружности на canvas (в пикселях)
• Радиус окружности (в пикселях)
• Начальный угол окружности (в радианах!)
• Конечный угол окружности (в радианах!)
• Рисовать по часовой стрелке или против (если против, то значение «false», а если по часовой то «true»). По умолчанию рисует против часовой

ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.stroke(); 

Изменять толщину линии можно с помощью известного метода lineWidth, а цвет с помощью strokeStyle. Давайте модифицируем предыдущий пример и попробуем нарисовать полуокружность с синим цветом линии и толщиной 5 пикселей:

ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI); ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет ctx.lineWidth = 5; // толщина линии в 5px ctx.stroke(); 

Заливать круги можно с помощью известного метода fill, а задание цвета делается с помощью уже оговоренного метода fillStyle. Попробуем доработать предыдущий пример и нарисовать верхний полукруг, но залитый зелёным цветом:

ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI); ctx.strokeStyle = '#1a2edb'; // тёмно-синий цвет ctx.lineWidth = 5; // толщина линии в 5px ctx.stroke(); ctx.beginPath(); ctx.arc(100, 100, 30, Math.PI, 0); ctx.fillStyle = '#50c843'; // зелёный цвет ctx.fill(); ctx.stroke(); 

Обратите внимание, что методы strokeStyle и lineWidth применились к объекту ctx, поэтому верхний полукруг тоже получил толщину линии в 5 пикселе и тёмно-синий цвет. Поэтому если хотите нарисовать несколько фигур на одном canvas, то сделайте несколько объектов: ctx1, ctx2, ctx3 и т.п. чтобы не переопределялись их свойства.

Источник

Руководство по Canvas

— это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации. Изображения в правой части статьи являются примерами использования . Примеры их создания приводятся в этой статье.

В этом руководстве описываются основы использования элемента для рисования 2D-графики. Приведённые примеры дадут вам понимание того, что вы можете сделать с помощью , а использованные в статье фрагменты кода помогут в создании собственных проектов.

Впервые использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с . Тег часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

Прежде чем начать

Работа с элементом довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов height и width . Для рисования графики мы будем использовать javascript context object , который создаёт графику динамически.

В этом руководстве

Смотрите Также

• Canvas topic page
• Drawing Graphics with Canvas (en-US)
• Canvas examples
• HTML5 Tutorial
• Drawing Text Using a Canvas (en-US)
• Adding Text to Canvas
• Canvas Drawing and Animation Application
• Interactive canvas tutorial
• HTML5CanvasTutorials
• How to draw N grade Bézier curves with the Canvas API
• W3C Standard

Примечание для помощников

Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.

Found a content problem with this page?

This page was last modified on 8 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник