Рисование прямоугольников через canvas на JavaScript
Квадраты и прямоугольники не обязательно рисовать с помощью комбинаций moveTo , lineTo — для этого есть методы и попроще. Давайте их разберем.
Метод strokeRect
Метод strokeRect (x, y, ширина, высота) рисует в заданной точке контур прямоугольника. Первые два параметра задают координаты точки, в которой окажется верхний левый угол нарисованного прямоугольника.
Давайте нарисуем прямоугольник с помощью strokeRect (считаем, что ctx уже есть):
let canvas = document.querySelector(‘canvas’); let ctx = canvas.getContext(‘2d’); ctx.strokeRect(50, 50, 100, 75);
Метод fillRect
Метод fillRect (x, y, ширина, высота) работает также, как и strokeRect , только рисует закрашенный прямоугольник. Посмотрим на примере:
let canvas = document.querySelector(‘canvas’); let ctx = canvas.getContext(‘2d’); ctx.fillRect(50, 50, 100, 75);
Метод rect
Следующий метод rect (x, y, ширина, высота) также рисует прямоугольник. Но видимым этот прямоугольник станет, только если применить метод stroke или fill . В первом случае будет контур, а во втором — фигура.
Давайте нарисуем контур с помощью rect :
let canvas = document.querySelector(‘canvas’); let ctx = canvas.getContext(‘2d’); ctx.rect(50, 50, 100, 75); ctx.stroke();
А теперь нарисуем фигуру:
let canvas = document.querySelector(‘canvas’); let ctx = canvas.getContext(‘2d’); ctx.rect(50, 50, 100, 75); ctx.fill();
Метод clearRect
Следующий метод clearRect (x, y, ширина, высота) работает как ластик, очищая прямоугольную область и делая содержимое совершенно прозрачным.
Давайте нарисуем квадратик с помощью fillRect и сотрем его часть с помощью clearRect :
let canvas = document.querySelector(‘canvas’); let ctx = canvas.getContext(‘2d’); ctx.fillRect(50, 50, 100, 100); ctx.clearRect(75, 75, 50, 50);
Javascript метод rect()
Примечание: Чтобы действительно нарисовать прямоугольник, используйте метод stroke() или fill().
| JavaScript синтаксис: | context.rect(x, y, width, height); |
Значения параметров
| Параметр | Описание |
|---|---|
| x | Координата X верхнего левого угла прямоугольника |
| y | Координата Y верхнего левого угла прямоугольника |
| width | Ширина прямоугольника в пикселях |
| height | Высота прямоугольника в пикселях |
Пример использования
Пример №1
Нарисуем прямоугольник 150*100 пикселей:
Ваш браузер не поддерживает HTML5 тег canvas.
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.rect(20,20,150,100); ctx.stroke();
Пример №2
Создадим три прямоугольника при помощи метода rect():
Ваш браузер не поддерживает HTML5 тег canvas.
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Красный прямоугольник ctx.beginPath(); ctx.lineWidth="6"; ctx.strokeStyle="red"; ctx.rect(5,5,290,140); ctx.stroke(); // Зеленый прямоугольник ctx.beginPath(); ctx.lineWidth="4"; ctx.strokeStyle="green"; ctx.rect(30,30,50,50); ctx.stroke(); // Синий прямоугольник ctx.beginPath(); ctx.lineWidth="10"; ctx.strokeStyle="blue"; ctx.rect(50,50,150,80); ctx.stroke();
Прямоугольники и другие фигуры в Canvas
Перед тем, как рисовать фигуры в Canvas, нужно создать холст и установить для него контекст. О том, как это делать, рассказывалось в предыдущей теме. А здесь я просто напишу код:
let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d');
Установка цвета
Все фигуры в Canvas делятся на два типа:
- Закрашенные фигуры
- Линии
Для каждого типа цвет устанавливается отдельно. Когда Вы выбрали цвет для какого-то типа, то все фигуры этого типа будут создаваться с таким цветом. Пока Вы не установите другой цвет. Свойство fillStyle содержит цвет для закрашенных фигур, а strokeStyle для линий. Цвет устанавливается любым из способов, существующих в CSS. Только не забывайте, что значениями этих свойств являются строки. Установим цвет для фигур:
ctx.fillStyle = '#F0F0F0'; //для линий ctx.strokeStyle = 'rgba(255,10,38,0.9)'; //для закрашенных фигур
Прямоугольники в Canvas
Для рисования прямоугольников и всех остальных фигур применяются координаты в пикселях. Точкой отсчёта является левый верхний угол холста.
Метод fillRect() рисует закрашенный прямоугольник.
fillRect(X, Y, ширина, высота)
X — координата X левого края прямоугольника
Y — координата Y верхнего края прямоугольника
ширина — ширина прямоугольника
высота — высота прямоугольника
Метод strokeRect() добавляет в Canvas прямоугольник в виде линий. Параметры такие же. Для примера нарисуем прямоугольник во весь холст, чтобы были видны его размеры. И добавим ещё один прямоугольник. Фигуры будут иметь цвета, которые мы установили ранее.
ctx.fillRect(0, 0, 699, 399); ctx.strokeRect(10, 60, 70, 100);
Должна получиться такая картинка:
Фигура может выйти за границы холста. К ошибке это не приведёт, но часть фигуры не будет отображаться.
Контуры
Остальные фигуры в Canvas рисуются с помощью контуров. Это делается так:
- Вызываем метод beginPath() , который создаёт новый контур.
- С помощью различных методов контекста рисуем сам контур.
- Если нужно замкнуть контур, то есть, соединить начальную и конечную точку, то используем метод closePath() . Это может потребоваться только для линий. А у замкнутых фигур контур всегда замыкается, даже если это не сделать.
- Вызываем один из методов — либо stroke() , либо fill() , которые рисуют фигуру по контуру. stroke() рисует линию, а fill() заполняет контур.
Контур не отображается на рисунке. Он становится виден, когда по нему нарисована фигура.
Метод lineTo() рисует прямую линию от текущей точки до указанной точки.
Указанная точка становится текущей. От неё можно нарисовать ещё одну прямую. И таким образом можно создать сложную линию. Если нужно её прервать и начать новую линию, то используется метод moveTo() , который задаёт новую текущую точку. Все линии остаются частью одного контура. При создании нового контура нужно использовать метод moveTo() для указания начальной точки, от которой начинается контур.
Добавим на рисунок линии:
19
20
21
22
23
24
25
26
27
ctx.strokeStyle = '#0000FF'; ctx.beginPath(); ctx.moveTo(20, 10); ctx.lineTo(70, 50); ctx.lineTo(120, 10); ctx.lineTo(170, 50); ctx.moveTo(200, 10); ctx.lineTo(230, 10); ctx.stroke();
Результат получится такой:
Замыкать контур не требовалось, поэтому метод closePath() не использован.
Теперь нарисуем закрашенный треугольник.
29
30
31
32
33
34
ctx.fillStyle = '#309053'; ctx.beginPath(); ctx.moveTo(285, 5); ctx.lineTo(320, 70); ctx.lineTo(250, 70); ctx.fill();
Должно выглядеть так:
Обратите внимание, нарисовано только две линии. Третья появилась при замыкании контура. Мы ничего не делали для этого. Контур замыкается при заливке.
Стиль линий
Есть несколько свойств, определяуюих стиль линий. Значения этих свойств нужно указывать до того, как линия нарисована. То есть, до метода stroke() . Ширину линий устанавливает свойство lineWidth . Значением является число, указывающее ширину в пикселях. Пример:
36
37
38
39
40
41
ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(340, 20); ctx.lineTo(430, 40); ctx.lineTo(340, 70); ctx.stroke();
Ширину менее 2 пикселей не всегда возможно сделать. Вместо уменьшения ширины линия может становиться прозрачной. Особенно это проявляется на горизонтальных и вертикальных линиях. Для дуги ширина 1 пиксель выглядит нормально. Можно указывать дробные значения.
Свойство lineCap определяет внешний вид краёв линий. Может иметь значения:
butt — плоские (по умолчанию)
Укажем это свойство при рисовании широкой линии:
ctx.lineCap = 'round';
Учитывайте, что круглые и квадратные края занимают место на рисунке и увеличивают длину линии.
Свойство lineJoin устанавливает внешний вид угла между двумя линиями. Значения:
miter — острый (по умолчанию)
ctx.lineJoin = 'round';
В этой теме уже рассматривалось рисование прямоугольников. Существует ещё метод rect() , который также добавляет прямоугольник в Canvas. Его отличие в том, что он создаёт контур, по которому далее нужно нарисовать фигуру.
Дуги
Метод arc() рисует дугу определённого радиуса. В том числе, она может нарисовать круг.
arc(X, Y, радиус, начальный угол, конечный угол, направление)
X — координата X центра
Y — координата Y центра
радиус — радиус в пикселях
начальный угол — угол в радианах, от которого начинается дуга Отсчёт производится от самой правой точки окружности.
конечный угол — угол в радианах, до которого доходит дуга
направление — направление дуги. false — по часовой стрелке, true — против часовой. По умолчанию установлено false
Начальный и конечный углы указываются так:
Число пи в JavaScript можно получить с помощью свойства Math.PI .
Чтобы нарисовать полный круг, начальный угол можно указать 0, а конечный 2 пи.
Добавим на рисунок окружность.
45
46
47
48
49
ctx.strokeStyle = '#5F0070'; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(160, 120, 50, 0, 2*Math.PI); ctx.stroke();
Не обязательно для каждой дуги создавать свой контур. Внутри одного контура можно создать несколько дуг и несколько прямых линий. А потом применить метод arc() и нарисовать по контуру линии. Только цвет и стиль линий будет одинаковый. То же относится и к закрашенным фигурам.
Нарисуем закрашенную фигуру в виде половины круга:
ctx.fillStyle = '#B50F20'; ctx.beginPath(); ctx.arc(300, 150, 50, 0.5*Math.PI, 1.5*Math.PI, true); ctx.fill();
Попробуйте нарисовать дуги другой формы.
Метод arcTo() рисует дугу по двум касательным окружности. Касательные формируются по предыдущей точке контура и двум контрольным точкам.
arcTo(X1, Y1, X2, Y2, радиус)
X1 — координата X первой контрольной точки
Y1 — координата Y первой контрольной точки
X2 — координата X второй контрольной точки
Y2 — координата Y второй контрольной точки
радиус — радиус дуги
Касательные для дуги определяются так:
Первая касательная проводится через предыдущую точку контура и контрольную точку 1. Предыдущая точка контура — это точка, до которой дошло рисование контура перед созданием дуги. Если контур начинается с дуги, то перед этим нужно использовать метод moveTo() и таким образом создать предыдущую точку.
Вторая касательная проводится через контрольную точку 1 и контрольную точку 2.
По этим двум касательным проходит дуга. Пример:
58
59
60
61
62
ctx.beginPath(); ctx.moveTo(400, 200); ctx.arcTo(400, 150, 450, 150, 50); ctx.closePath(); ctx.stroke();
Кривые Безье
Кривая Безье — это линия, созданная по специальным базовым точкам. Она начинается на первой базовой точке и заканчивается на последней базовой точке. То есть, первая и последняя точки находятся на линии. А вот остальные, промежуточные точки часто находятся вне линии. Они «оттягивают» линию на себя, и происходит плавное искривление линии. Кривые Безье рассчитываются по математическим формулам. Но при создании изображений это не имеет значения. Для нас важно, что они позволяют рисовать плавные линии сложной формы.
Метод quadraticCurveTo() рисует квадратичную кривую Безье. «Квадратичная» означает, что она рисуется по трём точкам. Первая — это предыдущая точка контура. И ещё две точки указываются в параметрах. Если предыдущей точки контура нет, её нужно создать с помощью метода MoveTo() .
quadraticCurveTo(X2, Y2, X3, Y3)
X2 — координата X второй базовой точки
Y2 — координата Y второй базовой точки
X3 — координата X третьей базовой точки
Y3 — координата Y третьей базовой точки
ctx.beginPath(); ctx.moveTo(10, 190); ctx.quadraticCurveTo(200, 250, 230, 190); ctx.stroke();
Метод bezierCurveTo() рисует кубическую кривую Безье. Она создаётся по четырём точкам. Первой точкой также является предыдущая точка контура. Соответственно, в параметрах указывается три точки. Пример:
ctx.beginPath(); ctx.moveTo(250, 300); ctx.bezierCurveTo(300, 230, 350, 370, 400, 300); ctx.stroke();
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2024 © basecourse.ru Все права защищены
Рисование в 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 и т.п. чтобы не переопределялись их свойства.