Как сделать красный квадрат в html

JavaScript | Как создать холст canvas с красным квадратом 100 на 100 пикселей на странице?

Суть задачи в том, чтобы использовать JavaScript для генерации нужной разметки HTML-документа, которая будет содержать в себе только один элемент холста canvas залитый квадратом красного цвета размером 100 на 100 пикселей. Как это сделать?

Ниже готовый код. Протестируйте!

< title >Как создать холст canvas с красным квадратом 100 на 100 пикселей на странице

let cs = document . createElement ( ‘canvas’ );

cs . height = 100 ;

let ctx = cs . getContext ( ‘2d’ );

ctx . fillStyle = «#FF0000» ;

ctx . fillRect ( 0 , 0 , cs . width , cs . height );

document . body . append ( cs );

Как это работает?

let cs = document . createElement ( ‘canvas’ );

Обращаемся к текущему объекту документа ( document ), который был создан в момент открытия страницы в браузере. Для создания нового объекта холста мы используем метод createElement() . Внутрь метода мы передаём строковое представление названия нужного нам HTML-элемента. В нашем случае это строка ‘ canvas ‘. Для созданного объекта холста мы создаём ссылку-привязку при помощи объявления переменной cs (сокращение от c anva s ).

cs . height = 100 ;

Для созданного объекта canvas мы задаём размеры холста. Они измеряются в пикселях. Ширина и Высота будут по 100 пикселей. Мы специально задали такие размеры, чтобы в итоге получился квадрат.

let ctx = cs . getContext ( ‘2d’ );

Холсты не умеют жить самостоятельно. Создание объекта в документе всего навсего говорит о существовании некоего контейнера, в котором должна быть какая-то графика — со своими цветами, линиями, текстами, переходами и тому подобное.

За наполнение холста полезной графической информацией отвечает КОНТЕКСТ. У любого холста должен быть свой контекст визуализации. Всего из существует 5, но мы воспользуемся самым простым, который отвечает за плоские рисунки — это контекст « 2d «.

Привязать контекст к нужному холсту можно при помощи метода getContext() . Объект контекста мы сохраним в переменную ctx (сокращение от c on t e x t)

ctx . fillStyle = «#FF0000» ;

После привязки контекста мы должны создать СТИЛЬ для нашего КОНТЕКСТА. Мы решили получить красный квадрат, значит нужно произвести заливку нашего КОНТЕКСТА цветом «#FF0000». Цвет зафиксирован в свойстве fillStyle.

ctx . fillRect ( 0 , 0 , cs . width , cs . height );

Теперь нужно указать координаты заливки цветом нашего КОНТЕКСТА, а также размер фигуры заливки. Метод fillRect() принимает 4 параметра.

Первые два параметра — это стартовое положение. 0 и 0 говорит о том, что заливка начнётся от левого верхнего угла.

Вторые два параметра — это расстояние, на которое будет произведена заливка — вправо и вниз. Измеряется также в пикселях. В нашем случае мы получаем расстояния заливки из значений свойств ширины и высоты самого объекта холста.

Это выражение позволит нам залить весь объект холста красным цветом от начала и до конца.

document . body . append ( cs );

Финальным шагом будет интеграция нашего объекта холста внутрь объекта body. Это нужно для того, чтобы мы смогли визуально увидеть результат наших манипуляций. В этом нам поможет метод append() .

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(); 

Как сделать красный квадрат в html

Кроме прямоугольников canvas позволяет рисовать и более сложные фигуры. Для оформления сложных фигур используется концепция геометрических путей, которые представляют набор линий, окружностей, прямоугольников и других более мелких деталей, необходимых для построения сложной фигуры.

Для создания нового пути надо вызвать метод beginPath() :

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.beginPath(); // начинаем рисование фигуры

После метода beginPath() вызываются методы, которые непосредственно создают различные участки пути.

Методы moveTo() и lineTo()

Для начала рисования пути нам надо зафиксировать начальную точку этого пути. Это можно сделать с помощью метода moveTo() , который имеет следующее определение:

moveTo(x, y)

Метод перемещает нас на точку с координатами x и y.

Метод lineTo() рисует линию. Он имеет похожее определение:

lineTo(x, y)

Метод рисует линию от текущей позиции до точки с координатами x и y.

Теперь нарисуем ряд линий:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.beginPath(); context.moveTo(20, 100); context.lineTo(140, 10); context.lineTo(260, 100);

Здесь мы устанавливаем начало пути в точку (20, 100), затем от нее рисуем линию до точки (140, 10) (линия вверх) и далее рисуем еще одну линию до точки (260, 100).

Отображение пути

Хотя мы нарисовали несколько линий, пока мы их не увидим, потому что их надо отобразить на экране. Для отображения пути надо использовать метод stroke() :

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.beginPath(); context.moveTo(20, 100); context.lineTo(140, 10); context.lineTo(260, 100); context.stroke(); // отображаем путь

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

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.beginPath(); context.moveTo(20, 100); context.lineTo(140, 10); context.lineTo(260, 100); context.strokeStyle = "red"; // красный цвет context.stroke(); // отображаем путь

Замыкание пути

Мы нарисовали две линии, и, допустим, мы их хотим соединить, чтобы замкнуть фигуру — в данном случае прямоугольник. В принципе в этом случае мы могли бы нарисовать еще одну линию, и у нас бы получился треугольник. Однако для упрощения Canvas API для этого предоставляет специальный метод — context.closePath() , который позволяет автоматически замкнуть путь, соединив первую и последнюю точки пути, и образовать фигуру:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.beginPath(); context.moveTo(20, 100); context.lineTo(140, 10); context.lineTo(260, 100); context.closePath(); // закрываем путь context.stroke();

Объекты Path2D

При работе со многими путями может возникнуть путаница. В этом случае для разграниченися отдельных путей можно использовать объект Path2D. Этот объект предоставляет методы, аналогичные методам объекта контекста в отношении создания пути. Например:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const path1 = new Path2D(); // первый путь path1.moveTo(20, 100); path1.lineTo(140, 10); path1.lineTo(260, 100); path1.closePath(); // закрываем путь context.strokeStyle = "blue"; context.stroke(path1); const path2 = new Path2D(); // первый путь path2.moveTo(20, 110); path2.lineTo(140, 200); path2.lineTo(260, 110); path2.closePath(); // закрываем путь context.strokeStyle = "red"; context.stroke(path2);

Здесь создаются два пути, каждый из которых представляет треугольник. Для отрисовки каждого пути вызывается метод context.stroke() , в который передается путь.

Метод rect

Метод rect() создает прямоугольник. Он имеет следующее определение:

rect(x, y, width, height)

Где x и y — это координаты верхнего левого угла прямоугольника относительно canvas, а width и height — соответственно ширина и высота прямоугольника. Нарисуем, к примеру, следующий прямоугольник:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.beginPath(); context.rect(30, 20, 100, 90); context.closePath(); context.stroke();

Стоит отметить, что такой же прямоугольник мы могли бы создать из линий:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.beginPath(); context.moveTo(30, 20); context.lineTo(130, 20); context.lineTo(130, 110); context.lineTo(30, 110); context.closePath(); context.stroke();

Метод fill()

Метод fill() заполняет цветом все внутреннее пространство нарисованного пути:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.beginPath(); context.moveTo(20, 100); context.lineTo(140, 10); context.lineTo(260, 100); context.closePath(); context.strokeStyle = "#2e86de"; context.fillStyle = "#4bcffa"; context.fill(); context.stroke();

С помощью свойства fillStyle опять же можно задать цвет заполнения фигуры. В данном случае это цвет «#4bcffa».

Метод clip()

Метод clip() позволяет вырезать из canvas определенную область, а все, что вне этой области, будет игнорироваться при последующей отрисовке.

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

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); // рисуем первый красный прямоугольник context.beginPath(); context.moveTo(10, 20); context.lineTo(130, 20); context.lineTo(130, 110); context.lineTo(10, 110); context.closePath(); context.strokeStyle = "red"; context.stroke(); // рисуем второй зеленый прямоугольник context.beginPath(); context.rect(30, 50, 180, 70); context.closePath(); context.strokeStyle = "green"; context.stroke();

Теперь применим метод clip() для ограничения области рисования только первым прямоугольником:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); // рисуем первый красный прямоугольник context.beginPath(); context.moveTo(10, 20); context.lineTo(130, 20); context.lineTo(130, 110); context.lineTo(10, 110); context.closePath(); context.strokeStyle = "red"; context.stroke(); context.clip(); // обрезаем область рисования по первому пути // рисуем второй зеленый прямоугольник context.beginPath(); context.rect(30, 50, 180, 70); context.closePath(); context.strokeStyle = "green"; context.stroke();

Поскольку вызов метода clip() идет после первого прямоугольника, то из второго прямоугольника будет нарисована только та часть, которая попадает в первый прямоугольник.

Метод arc()

Метод arc() добавляет к пути участок окружности или дугу/арку. Он имеет следующее определение:

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Здесь используются следующие параметры:

• x и y : x- и y-координаты, в которых начинается дуга
• radius : радиус окружности, по которой создается дуга
• startAngle и endAngle : начальный и конечный угол, которые усекают окружность до дуги. В качестве единици измерения для углов применяются радианы. Например, полная окружность — это 2π радиан. Если, к примеру, нам надо нарисовать полный круг, то для параметра endAngle можно указать значение 2π. В JavaScript эту веричину можно получить с помощью выражения Math.PI * 2 .
• anticlockwise : направление движения по окружности при отсечении ее части, ограниченной начальным и конечным углом. При значении true направление против часовой стрелки, а при значении false — по часовой стрелке.

Пример рисования дуг и окружностей

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.strokeStyle = "red"; context.beginPath(); context.moveTo(20, 90); context.arc(20, 90, 50, 0, Math.PI/2, false); context.closePath(); context.stroke(); context.beginPath(); context.moveTo(130, 90); context.arc(130, 90, 50, 0, Math.PI, false); context.closePath(); context.stroke(); context.beginPath(); context.moveTo(240, 90); context.arc(240, 90, 50, 0, Math.PI * 3 / 2, false); context.closePath(); context.stroke(); context.beginPath(); context.arc(350, 90, 50, 0, Math.PI*2, false); context.closePath(); context.stroke();

Последний параметр anticlockwise играет важную роль, так как определяет движение по окружности, и в случае изменения true на false и наоборот, мы можем получить совершенно разные фигуры:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.strokeStyle = "red"; context.beginPath(); context.moveTo(80, 90); context.arc(80, 90, 50, 0, Math.PI/2, false); context.closePath(); context.stroke(); context.beginPath(); context.moveTo(240, 90); context.arc(240, 90, 50, 0, Math.PI/2, true); context.closePath(); context.stroke();

Метод arcTo()

Метод arcTo() также рисует дугу. Он имеет следующее определение:

arcTo(x1, y1, x2, y2, radius)

Где x1 и y1 — координаты первой контрольной точки, x2 и y2 — координаты второй контрольной точки, а radius — радиус дуги.

Пример рисования дуг с помощью arcTo() :

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.strokeStyle = "red"; context.beginPath(); context.moveTo(0, 150); context.arcTo(0, 0, 150, 0, 140) context.closePath(); context.stroke();

Здесь мы перемещаемся вначале на точку (0, 150), и от этой точки до первой контрольной точки (0, 0) будет проходить первая касательная. Далее от первой контрольной точки (0, 0) до второй (150, 0) будет проходить вторая касательная. Эти две касательные оформляют дугу, а 140 служит радиусом окружности, на которой усекается дуга.

Метод quadraticCurveTo()

Метод quadraticCurveTo() создает квадратичную кривую. Он имеет следующее определение:

quadraticCurveTo(x1, y1, x2, y2)

Где x1 и y1 — координаты первой опорной точки, а x2 и y2 — координаты второй опорной точки.

Пример квадратичной Безье:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.strokeStyle = "red"; context.beginPath(); context.moveTo(20, 90); context.quadraticCurveTo(130, 0, 280, 90) context.closePath(); context.stroke();

Метод bezierCurveTo(). Кривая Безье

Метод bezierCurveTo() рисует кривую Безье. Он имеет следующее определение:

bezierCurveTo(x1, y1, x2, y2, x3, y3)

Где x1 и y1 — координаты первой опорной точки, x2 и y2 — координаты второй опорной точки, а x3 и y3 — координаты третьей опорной точки.

Пример кривой Безье:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.strokeStyle = "red"; context.beginPath(); context.moveTo(30, 100); context.bezierCurveTo(110, 0, 190, 200, 270, 100); context.closePath(); context.stroke();

Комплексные фигуры

Объединим несколько фигур вместе и нарисуем более сложную двухмерную сцену:

Большой красный квадрат Эмоджи ��

Эмоджи в виде красного квадратика. Напоминает красную карточку, используемую при игре в футбол. Также может означать какой-либо оттенок красного цвета.

Символ «Большой красный квадрат» входит в Подраздел «Цветные квадратики» Раздела «Расширенные геометрические фигуры» и был утверждён как часть Юникода версии 12.0 в 2019 г. В 2019 году он также был утверждён, как Эмоджи версии 12.0, и добавлен в Подкатегорию «Геометрические фигуры» Категории «Символы».

Этот текст также доступен на следующих языках: English; Español;

Синонимы

Показать больше
Техническая информация
Отображение символа

Название в Юникоде	Large Red Square
Номер в Юникоде	U+1F7E5
HTML -код	🟥
CSS-код	\1F7E5
Блок Юникода	Расширенные геометрические фигуры
Подраздел Юникода	Цветные квадратики
Версия Юникода	12.0 (2019)
Версия Эмоджи	12.0 (2019)
Раздел Эмоджи	Символы
Подраздел Эмоджи	Геометрические фигуры

Версия	12.0
Блок	Расширенные геометрические фигуры
Тип парной зеркальной скобки (bidi)	Нет
Композиционное исключение	Нет
Изменение регистра	1F7E5
Простое изменение регистра	1F7E5

Кодировка	hex	dec (bytes)	dec	binary
UTF-8	F0 9F 9F A5	240 159 159 165	4036992933	11110000 10011111 10011111 10100101
UTF-16BE	D8 3D DF E5	216 61 223 229	3627933669	11011000 00111101 11011111 11100101
UTF-16LE	3D D8 E5 DF	61 216 229 223	1037624799	00111101 11011000 11100101 11011111
UTF-32BE	00 01 F7 E5	0 1 247 229	128997	00000000 00000001 11110111 11100101
UTF-32LE	E5 F7 01 00	229 247 1 0	3858170112	11100101 11110111 00000001 00000000