Как нарисовать квадрат в css

Создаем геометрические фигуры с помощью CSS

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

Все те фигуры, которые вы рисовали ранее в графических редакторах теперь можно сделать с помощью CSS3 . Новые CSS свойства transform и border-radius позволяют делать это, не прибегая к помощи сторонних программ.

В сегодняшнем уроке мы создадим геометрические фигуры, используя только свойства CSS3 .

Что вам понадобится для использования данного руководства

Знание CSS3 ;
Время и внимание.

Скачать исходные файлы
Просмотреть демонстрацию

Окружность

HTML
Для создания окружности с помощью CSS , во-первых, мы будем использовать тег div . Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle :

 CSS 
Что касается CSS , просто задаем значения width и height , а затем задаем значение border radius , равное половине от width и height :

#circle

Квадрат

HTML
Чтобы создать квадрат в CSS , как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div :

 CSS 
Для создания квадрата в CSS , просто задаем значения width и height равные друг другу:

#square

Прямоугольник

HTML
Чтобы создать прямоугольную форму, в CSS , как и в случае с квадратом, настраиваем div , где ID равно rectangle :

 CSS 
Так же, как и в случае с квадратом, мы зададим значения width и height , но на этот раз width будет больше, чем height :

#rectangle

Овал

HTML
Для создания овала в CSS , создаем div с ID равным oval :

 CSS 
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height :

#oval < width: 200px; height: 100px; background: #e9337c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; >

Треугольник

HTML
И снова, для создания треугольника с помощью CSS , делаем div с ID равным triangle .

CSS
Для создания треугольника мы будем манипулировать свойством border . Изменяя ширину границы, вы получите различные углы поворота:

#triangle

Треугольник, направленный вниз

HTML
Создаем перевернутый треугольник с помощью CSS . Снова создаем div . ID равно triangle_down :

 CSS 
Создавая перевернутый треугольник, оперируем толщиной границы:

#triangle_down

Треугольник, направленный влево

HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left :

 CSS 
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:

#triangle_left

Треугольник, направленный вправо

HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right :

 CSS 
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:

#triangle_right

Ромб

HTML
Для создания фигуры « ромб », создаем div с ID diamond :

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

#diamond < width: 120px; height: 120px; background: #1eff00; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 60px 0 10px 310px; >

Трапеция

HTML
Для создания фигуры « трапеция », создаем div с ID равным trapezium .

 CSS 
Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:

#trapezium

Параллелограмм

HTML
Для создания фигуры « параллелограмм », создаем div с ID равным parallelogram :

 CSS 
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:

#parallelogram

Звезда

HTML
Для создания фигуры « звезда », создаем div с ID равным star :

 CSS 
Создание фигуры « звезда » - последовательность странных манипуляций с границами с использованием свойства transform равным rotate . Смотрите код ниже:

#star < width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star:before < height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star:after

Звезда (6ти конечная)

HTML
Для создания фигуры « шестиконечная звезда », создаем div с ID равным parallelogram :

 CSS 
Шестиконечная звезда создается с помощью свойства border . Создаем два набора фигур и комбинируем в одну:

#star_six_points < width: 0; height: 0; display: block; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #de34f7; margin: 10px auto; >#star_six_points:after

Пятиугольник

HTML
Для создания фигуры « пятиугольник », создаем div с ID равным pentagon :

 CSS 
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:

#pentagon < width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #277bab transparent; >#pentagon:before

Шестиугольник

HTML
Для создания фигуры « шестиугольник », создаем div с ID равным hexagon :

 CSS 
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:

#hexagon < width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto; >#hexagon:before < content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e; >#hexagon:after

Восьмиугольник

HTML
Для создания фигуры « восьмиугольник », создаем div с ID octagon :

 CSS 
Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:

#octagon < width: 100px; height: 100px; background: #ac60ec; position: relative; >#octagon:before < content: ""; width: 42px; height: 0; position: absolute; top: 0; left: 0; border-bottom: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; >#octagon:after < content: ""; width: 42px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; >>

Сердце

HTML
Для создания фигуры « сердце », создаем div с ID heart :

 CSS 
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:

#heart < position: relative; >#heart:before,#heart:after < content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Яйцо

HTML
Для создания фигуры « яйцо », создаем div с ID egg :

 CSS 
Концепция фигуры « яйцо » похожа на концепцию фигуры « овал », за исключением свойства height , которое больше, чем width . И особое внимание в этой фигуре придается свойству radius . С помощью подбора его значений можно добиться нужного результата:

Бесконечность

HTML
Для создания фигуры « бесконечность », создаем div с ID infinity:

 CSS 
Фигура « бесконечность » может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:

#infinity < width: 220px; height: 100px; position: relative; >#infinity:before,#infinity:after < content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after

Бабл для комментария

HTML
Для создания фигуры « библ », создаем div с ID comment_bubble :

 CSS 
Эта фигура может быть создана путем создания треугольника и задания свойства border radius , а затем присоединения прямоугольника к его левой стороне:

#comment_bubble < width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; >#comment_bubble:before

Pacman

HTML
Для создания фигуры « pacman », создаем div с ID pacman :

 CSS 
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:

#pacman

Заключение

Есть множество возможностей создания фигур с помощью CSS3 . Вы можете использовать фигуры как часть вашего дизайна, к тому же у них есть приемлемый « костыль » в случае браузеров эпохи юрского периода, на подобии Internet Explorer .

Надеюсь, вам понравилось данное руководство. В блоке комментариев вы можете приводить собственные способы создания фигур из руководства.

Ну а в последнем примере вместо последних четырёх свойств можно было указать одно: border-radius: 70px. Впрочем, возможно, примеры подобраны так, чтоб показать что одни и те же свойства можно задавать иногда разными свойствами.

Чтоб понять как работает восьмиугольник нужно сделать его на белом фоне. Тогда видно, что грани не обрезаются, а просто граница, с помощью которой сделан эффект перехода, совпадает по цвету с фоном, в котором находится восьмиугольник. Для того, чтоб не зависеть от фона, нужно сделать исходным не квадрат, а прямоугольник и к нему приделать две трапеции.
Интересно соотношение размеров. 29 ширина перехода + 42 ширина грани + 29 ширина второго перехода = 100 пикселей, равен квадрату.
При этом, если исходить из того, что грани должны быть равны, то 29 пикселей перехода должны образовывать грань в 42 пикселя. Поскольку 29 пикселей это катет прямоугольного треугольника, а грань — его гипотенуза, то, по теореме Пифагора, 29 в квадрате (841) + ещё столько же (сумма квадратов катетов 1682) должна быть равна 42 в квадрате (1764).
Ну, почти. ��

А как сделать параллелограмм, но так чтобы правило наклона не воздействовало на текст?

Рисование фигур с помощью canvas

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

Сетка

Перед тем, как мы начнём рисовать, нам нужно поговорить о сетке canvas или координатной плоскости. Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas с сеткой, накладываемой по умолчанию. Обычно 1 единица на сетке соответствует 1 пикселю на canvas. Начало координат этой сетки расположено в верхнем левом углу в координате (0,0 ) . Все элементы размещены относительно этого начала. Таким образом, положение верхнего левого угла синего квадрата составляет х пикселей слева и у пикселей сверху, на координате (х, у) . Позже в этом уроке мы увидим, как можно перевести начало координат в другое место, вращать сетку и даже масштабировать её, но сейчас мы будем придерживаться настроек сетки по умолчанию.

Рисование прямоугольников

Сначала рассмотрим прямоугольник. Ниже представлены три функции рисования прямоугольников в canvas:

Рисование заполненного прямоугольника.

Рисование прямоугольного контура.

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

Каждая из приведённых функций принимает несколько параметров:

x, y устанавливают положение верхнего левого угла прямоугольника в canvas (относительно начала координат);
width (ширина) и height (высота) определяют размеры прямоугольника.

Ниже приведена функция draw(), использующая эти три функции.

Пример создания прямоугольных фигур

html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); ctx.fillRect(25, 25, 100, 100); ctx.clearRect(45, 45, 60, 60); ctx.strokeRect(50, 50, 50, 50); > >

Этот пример изображён ниже.

Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создаёт прямоугольный контур 50х50 пикселей внутри очищенного квадрата.

На следующей странице мы рассмотрим две альтернативы методу clearRect(), и также увидим, как можно изменять цвет и стиль контура отображаемых фигур.

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

Рисование контуров (path)

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

Создание фигур используя контуры происходит в несколько важных шагов:

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

Здесь приведены функции, которые можно использовать в описанных шагах:

Создаёт новый контур. После создания используется в дальнейшем командами рисования при построении контуров.

Методы для установки различных контуров объекта.

Закрывает контур, так что будущие команды рисования вновь направлены контекст.

Рисует фигуру с внешней обводкой.

Рисует фигуру с заливкой внутренней области.

Первый шаг создания контура заключается в вызове функции beginPath() . Внутри содержатся контуры в виде набора суб-контуров (линии, дуги и др.), которые вместе образуют форму фигуры. Каждый вызов этого метода очищает набор, и мы можем начинать рисовать новые фигуры.

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

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

Третий и необязательный шаг — это вызов closePath() . Этот метод пытается закрыть фигуру, рисуя прямую линию из текущей точки в начальную. Если фигура была уже закрыта или является просто точкой, то функция ничего не делает.

Примечание: Когда вы вызываете fill() , то каждая открытая фигура закрывается автоматически, так что вы можете не использовать closePath() . Это обстоятельство не имеет место в случае вызова stroke() .

Рисование треугольника

Например, код для рисования треугольника будет выглядеть как-то так:

html> body onload="draw();"> canvas id="canvas" width="100" height="100">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); > >

Результат выглядит так:

Передвижение пера

Одна очень полезная функция, которая ничего не рисует, но связана по смыслу с вышеописанными функциями — это moveTo() . Вы можете представить это как отрыв (подъем) пера от бумаги и его перемещение в другое место.

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

При инициализации canvas или при вызове beginPath() , вы захотите использовать функцию moveTo() для перемещения в точку начала рисования. Можно использовать moveTo() и для рисования несвязанного(незакрытого) контура. Посмотрите на смайлик ниже.

Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию draw() , рассмотренную ранее.

html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Внешняя окружность ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false); // рот (по часовой стрелке) ctx.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Левый глаз ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Правый глаз ctx.stroke(); > >

Результат этого ниже:

Если вы захотите увидеть соединение линии, то можете удалить вызов moveTo() .

Примечание: Подробнее о функции arc() ,посмотрите Дуги .

Линии

Для рисования прямых линий используйте метод lineTo() .

Рисует линию с текущей позиции до позиции, определённой x и y .

Этот метод принимает два аргумента x и y , которые являются координатами конечной точки линии. Начальная точка зависит от ранее нарисованных путей, причём конечная точка предыдущего пути является начальной точкой следующего и т. д. Начальная точка также может быть изменена с помощью метода moveTo() .

Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.

html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); // Filled triangle ctx.beginPath(); ctx.moveTo(25, 25); ctx.lineTo(105, 25); ctx.lineTo(25, 105); ctx.fill(); // Stroked triangle ctx.beginPath(); ctx.moveTo(125, 125); ctx.lineTo(125, 45); ctx.lineTo(45, 125); ctx.closePath(); ctx.stroke(); > >

Отрисовка начинается с вызова beginPath() , чтобы начать рисовать путь новой фигуры. Затем мы используем метод moveTo() , чтобы переместить начальную точку в нужное положение. Ниже рисуются две линии, которые образуют две стороны треугольника.

Вы заметите разницу между закрашенным и обведённым контуром треугольниками. Это, как упоминалось выше, из-за того, что фигуры автоматически закрываются, когда путь заполнен (т. е. закрашен), но не тогда, когда он очерчен (т. е. обведён контуром). Если бы мы не учли closePath() для очерченного треугольника, тогда только две линии были бы нарисованы, а не весь треугольник.

Дуги

Для рисования дуг и окружностей, используем методы arc() и arcTo().

Рисуем дугу с центром в точке (x,y) радиусом radius , начиная с угла startAngle и заканчивая в endAngle в направлении против часовой стрелки anticlockwise (по умолчанию по ходу движения часовой стрелки).

Рисуем дугу с заданными контрольными точками и радиусом, соединяя эти точки прямой линией.

Рассмотрим детальнее метод arc(), который имеет пять параметров: x и y — это координаты центра окружности, в которой должна быть нарисована дуга. radius — не требует пояснений. Углы startAngle и endAngle определяют начальную и конечную точки дуги в радианах вдоль кривой окружности. Отсчёт происходит от оси x. Параметр anticlockwise — логическое значение, которое, если true , то рисование дуги совершается против хода часовой стрелки; иначе рисование происходит по ходу часовой стрелки.

Примечание: Углы в функции arc() измеряют в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать JavaScript-выражение: radians = (Math.PI/180)*degrees .

Следующий пример немного сложнее, чем мы рассматривали ранее. Здесь нарисованы 12 различных дуг с разными углами и заливками.

Два for цикла размещают дуги по столбцам и строкам. Для каждой дуги, мы начинаем новый контур, вызывая beginPath() . В этом коде каждый параметр дуги для большей ясности задан в виде переменной, но вам не обязательно делать так в реальных проектах.

Координаты x и y должны быть достаточно ясны. radius and startAngle — фиксированы. endAngle начинается со 180 градусов (полуокружность) в первой колонке и, увеличиваясь с шагом 90 градусов, достигает кульминации полноценной окружностью в последнем столбце.

Установка параметра clockwise определяет результат; в первой и третьей строках рисование дуг происходит по часовой стрелке, а во второй и четвёртой — против часовой стрелки. Благодаря if-условию верхняя половина дуг образуется с контуром, (обводкой), а нижняя половина дуг — с заливкой.

Примечание: Этот пример требует немного большего холста (canvas), чем другие на этой странице: 150 x 200 pixels.

html> body onload="draw();"> canvas id="canvas" width="150" height="200">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); for (var i = 0; i  4; i++)  for (var j = 0; j  3; j++)  ctx.beginPath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i > 1)  ctx.fill(); > else  ctx.stroke(); > > > > >

Безье и квадратичные кривые

Следующим типом доступных контуров являются кривые Безье, и к тому же доступны в кубическом и квадратичном вариантах. Обычно они используются при рисовании сложных составных фигур.

Рисуется квадратичная кривая Безье с текущей позиции пера в конечную точку с координатами x и y , используя контрольную точку с координатами cp1x и cp1y .

Рисуется кубическая кривая Безье с текущей позиции пера в конечную точку с координатами x и y , используя две контрольные точки с координатами ( cp1x , cp1y ) и (cp2x, cp2y).

Различие между ними можно увидеть на рисунке, изображённом справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.

Параметры x и y в этих двух методах являются координатами конечной точки. cp1x и cp1y — координаты первой контрольной точки, а cp2x и cp2y — координаты второй контрольной точки.

Использование квадратичных или кубических кривых Безье может быть спорным выходом, так как в отличие от приложений векторной графики типа Adobe Illustrator, мы не имеем полной видимой обратной связи с тем, что мы делаем. Этот факт делает довольно сложным процесс рисования сложных фигур. В следующем примере мы нарисуем совсем простую составную фигуру, но, если у вас есть время и ещё больше терпения, можно создать более сложные составные фигуры.

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

Квадратичные кривые Безье

В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.

html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75, 25); ctx.quadraticCurveTo(25, 25, 25, 62.5); ctx.quadraticCurveTo(25, 100, 50, 100); ctx.quadraticCurveTo(50, 120, 30, 125); ctx.quadraticCurveTo(60, 120, 65, 100); ctx.quadraticCurveTo(125, 100, 125, 62.5); ctx.quadraticCurveTo(125, 25, 75, 25); ctx.stroke(); > >

Кубические кривые Безье

В этом примере нарисовано сердце с использованием кубических кривых Безье.

html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); // Cubic curves example ctx.beginPath(); ctx.moveTo(75, 40); ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); ctx.fill(); > >

Прямоугольники

Все эти методы мы видели в Рисование прямоугольников, которые рисуют прямоугольники сразу в canvas, так же есть метод rect() , который не отображает, а только добавляет контур рисования (path) заданного прямоугольника к последнему открытому контуру.

Добавляет в path прямоугольник, верхний левый угол которого указан с помощью (x, y) с вашими width и height

Когда этот метод вызван, автоматически вызывается метод moveTo() с параметрами (x, y). Другими словами, позиция курсора устанавливается в начало добавленного прямоугольника.

Создание комбинаций

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

html> body onload="draw();"> canvas id="canvas" width="150" height="150">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); roundedRect(ctx, 12, 12, 150, 150, 15); roundedRect(ctx, 19, 19, 150, 150, 9); roundedRect(ctx, 53, 53, 49, 33, 10); roundedRect(ctx, 53, 119, 49, 16, 6); roundedRect(ctx, 135, 53, 49, 33, 10); roundedRect(ctx, 135, 119, 25, 49, 10); ctx.beginPath(); ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false); ctx.lineTo(31, 37); ctx.fill(); for (var i = 0; i  8; i++)  ctx.fillRect(51 + i * 16, 35, 4, 4); > for (i = 0; i  6; i++)  ctx.fillRect(115, 51 + i * 16, 4, 4); > for (i = 0; i  8; i++)  ctx.fillRect(51 + i * 16, 99, 4, 4); > ctx.beginPath(); ctx.moveTo(83, 116); ctx.lineTo(83, 102); ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); ctx.lineTo(111, 116); ctx.lineTo(106.333, 111.333); ctx.lineTo(101.666, 116); ctx.lineTo(97, 111.333); ctx.lineTo(92.333, 116); ctx.lineTo(87.666, 111.333); ctx.lineTo(83, 116); ctx.fill(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91, 96); ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); ctx.moveTo(103, 96); ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(101, 102, 2, 0, Math.PI * 2, true); ctx.fill(); ctx.beginPath(); ctx.arc(89, 102, 2, 0, Math.PI * 2, true); ctx.fill(); > > // A utility function to draw a rectangle with rounded corners. function roundedRect(ctx, x, y, width, height, radius)  ctx.beginPath(); ctx.moveTo(x, y + radius); ctx.arcTo(x, y + height, x + radius, y + height, radius); ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius); ctx.arcTo(x + width, y, x + width - radius, y, radius); ctx.arcTo(x, y, x, y + radius, radius); ctx.stroke(); >

Конечное изображение выглядит так:

Мы не будем подробно останавливаться на том, так как это на самом деле удивительно просто. Наиболее важные вещи, которые следует отметить, это использование свойства fillStyle в контексте рисования и использование функции утилиты (в данном случае roundedRect() ). Использование функций утилиты для битов чертежа часто может быть очень полезным и сократить количество необходимого кода, а также его сложность.

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

Path2D объекты

Как мы видели в последнем примере, есть серия путей и команд для рисования объектов на вашем холсте. Чтобы упростить код и повысить производительность, объект Path2D (en-US), доступный в последних версиях браузеров, позволяет вам кешировать или записывать эти команды рисования. Вы можете быстро запускать свои пути. Давайте посмотрим, как мы можем построить объект Path2D :

Конструктор Path2D() возвращает вновь созданный объект Path2D необязательно с другим путём в качестве аргумента (создаёт копию) или необязательно со строкой, состоящей из данных пути SVG path .

new Path2D(); // пустой path объект new Path2D(path); // копирование из другого path new Path2D(d); // path из SVG

Все методы path , такие как moveTo , rect , arc , или quadraticCurveTo , и т.п, которые мы уже знаем, доступны для объектов Path2D

API Path2D также добавляет способ комбинирования путей с использованием метода addPath . Это может быть полезно, если вы хотите, например, создавать объекты из нескольких компонентов.

Добавляет путь к текущему пути с необязательной матрицей преобразования.

Path2D пример

В этом примере мы создаём прямоугольник и круг. Оба они сохраняются как объект Path2D , поэтому они доступны для последующего использования. С новым API Path2D несколько методов были обновлены, чтобы при необходимости принять объект Path2D для использования вместо текущего пути. Здесь stroke и fill используются с аргументом пути, например, для рисования обоих объектов на холст.

html> body onload="draw();"> canvas id="canvas" width="130" height="100">canvas> body> html>

function draw()  var canvas = document.getElementById("canvas"); if (canvas.getContext)  var ctx = canvas.getContext("2d"); var rectangle = new Path2D(); rectangle.rect(10, 10, 50, 50); var circle = new Path2D(); circle.moveTo(125, 35); circle.arc(100, 35, 25, 0, 2 * Math.PI); ctx.stroke(rectangle); ctx.fill(circle); > >

Использование SVG путей

Ещё одна мощная функция нового Canvas Path2D API использует данные пути SVG, SVG path data, для инициализации путей на вашем холсте. Это может позволить вам передавать данные пути и повторно использовать их как в SVG, так и в холсте.

Путь перемещается в точку ( M10 10 ), а затем горизонтально перемещается на 80 пунктов вправо ( h 80 ), затем на 80 пунктов вниз ( v 80 ), затем на 80 пунктов влево ( h -80 ), а затем обратно на start ( z ). Этот пример можно увидеть на странице Path2D constructor (en-US) .

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

« Предыдущая статья
Следующая статья »

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как нарисовать квадрат в css

Для того, чтобы сделать простой квадрат в css? нам понадобится какой-то блок/элемент, к которому мы прибавим id

Что мы знаем о квадрате!? Что у квадрата все стороны равны! Поэтому сделаем для квадрата высоту(height) и ширину(width) одинаковыми? чтобы могли увидит края квадрата добавим ему бордюр( border: 1px solid):

border: 1px solid;

Простой квадрат через css

Как видим. у нас замечательный простой квадрат через css получился:

Простой квадрат

Квадрат через css с заливкой фона

Давайте чуть развеселим наш квадрат css, а то уж больно он скучный какой-то получился! Добавим к нашему квадрату , заливку красного цвета -> background: red; , цвет сменим с черного, по умолчанию, на белый -> color: #ffffff;, поставим текст посередине -> text-align: center;

Код квадрата css

border: 1px solid black;

квадрат css с заливкой фона

Простой квадрат

Квадрат css с фоно на задним фоне

Возьмем самый первый вариант квадрата, изменим в нём ид на kvadrat_1

Для того, чтобы добавить фото на задний фон квадрата, достаточно поставить свойство background-image:

background-image: url(https://dwweb.ru/__img/css/figure/bear.jpg);

Итого у нас получится стили для квадрата с фото на заднем фоне:

border: 1px solid black;

и да. текст отсюда уберем, потому, что он нам здесь не нужен!

Задачка — вписать квадрат в квадрат css

Мы вступаем в мою любимую стезю – математика! И вписать квадрат в квадрат не получится без знания математики!

Чтобы вписать квадрат в квадрат надо решить математическую задачку!

1. У нас есть выше идущий квадрат, сторона которого равна 100px.
2. Диагональ вписываемого квадрата равна будет 100px
3. Диагональ равна — d = a√2 , где a – сторона квадрата и далее выведем чему она равна — a² = d²/ 2 , => a = √d²/ 2 отсюда мы получим 70,71, но из опыта моего возьмем меньше чем больше – т.е. сторона будет равна 70px
4. Нам остаётся от позиционировать его по месту и повернуть на 45 градусов.

Квадрат в квадрате

Квадрат со скругленными углами

И не посмотреть, что ищут пользователи со словом квадрат css — я естественно не мог! И один из запросов border css квадрат со скругленными.

Ну что ж – давайте и это сделаем!

Для первого кода нужно добавить border-radius

border css квадрат со скругленными

Квадрат крутится при наведении мышки

Как сделать, чтобы квадрат вращался при наведении мышки на него!?

Мы хотим заставить, чтобы квадрат вращался при наведнии на него мышки! Ну что ж! Давайте это сделаем!

Нам понадобится немного :

-moz-transition: all 1s ease-out;

-o-transition: all 1s ease-out;

-webkit-transition: all 1s ease-out;

Как нарисовать квадрат в css

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

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

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

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

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

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

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

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

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

Здесь мы устанавливаем начало пути в точку (30, 20), затем от нее рисуем линию до точки (100, 80) и далее рисуем еще одну линию до точки (150, 30).

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

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

Хотя мы нарисовали все две линии, но по факту мы увидим три линии, которые оформляют треугольник. Дело в том, что вызов метода context.closePath() завершает путь, соединяя последнюю точку с первой. И в результате образуется замкнутый контур.

Если нам не надо замыкание пути, то мы можем удалить вызов метода context.closePath() :

Метод rect

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

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

Рисование прямоугольника на canvas в HTML5

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

Метод fill()

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

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

Закрашивание фигур на canvas в HTML5

Метод clip()

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

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

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

clip на canvas в HTML5

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

Метод arc()

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

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

x и y : x- и y-координаты, в которых начинается арка

radius : радиус окружности, по которой создается арка

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

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

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

Метод arcTo()

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

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

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

Метод quadraticCurveTo()

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

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

Квадратичная кривая Безье на canvas в HTML5

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

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

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

Кривая Безье на canvas в HTML5

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

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

Введение в Canvas

В этой статье мы познакомим вас c новым элементом HTML5 — canvas, который позволяет рисовать различные объекты и отображать в самых современных браузерах. Прочитав данный урок, вы узнаете, как получить доступ к элементу canvas, рисовать фигуры, изменять цвета, и стирать объекты. Приобретайте путёвку в современный мир Web технологий.

Я надеюсь, вам понравится эта серия уроков. Она рассчитана на тех, кто имеет какой-то опыт работы в JavaScript, и совсем ничего не знает насчёт элемента canvas. Если вы новичок в JavaScript, не переживайте, вы приобретёте некоторые знания, прочитав данную статью.

Знакомимся с элементом Canvas

Использовать элемент canvas очень просто

Когда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas — это нововведение для всех браузеров.

Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.

Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.

Поддержка

Этот элемент только для самых современных браузеров

Должен отметить, что самые современные браузеры поддерживают данный элемент, даже последний Internet Explorer.

Internet Explorer (9.0+)
Safari (3.0+)
Firefox (3.0+)
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)
Android (1.0+)

К слову сказать, вы можете активировать данный элемент и в ранних версиях Internet Explorer при помощи данного плагина – Explorer Canvas.

Размеры элемента Canvas

В примере, расположенном выше вы уже увидели как применять атрибуты ширины и высоты: width и height. Используя CSS, вы также можете контролировать размеры canvas, как и других HTML элементов. И это вполне логично. Однако так как canvas использует в своём функционале так называемый двумерный контекст, то при применении CSS к размерам холста, приведёт к тому, что все внутренние элементы будут искажены.

Немного о двумерном контексте

Немного выше я сказал, что элемент canvas — это только половина всей истории. Вторая половина — это как раз и есть двумерный контекст, который по сути позволяет вам видеть и всю мощь функционала данного элемента.

Давайте расставим всё на свои места: когда мы используем элемент canvas, то фактически он не помещается на страницу. Вместо него вы получаете рисунок, который формируется в двумерном контексте, а доступ к этому рисунку осуществляется как раз через элемент canvas благодаря JavaScript API. В принципе кому-то эта информация может показаться лишней, однако лишние знания вам не повредят.

Система координат

Если вы когда-либо работали с языками, имеющими дело с 2d графикой (такими как ActionScript, Processing, и т.д.), тогда вы знаете всё о системах координат, основанных на движении. Двумерный контекст в элементе canvas ничем не отличается от перечисленных систем. Он использует стандартную систему координат Cartesian, с начальной точкой (0, 0), расположенной с левой верхней стороны. Движение вправо будет увеличивать значение объекта по оси x, в то время как движение вниз, будет увеличивать значения точек объекта по оси y. Всё довольно примитивно.

Одна единица данной системы координат равняется одному пикселю вашего экрана (в большинстве случаев).

Получение доступа к двумерному контексту

Для того чтобы получить доступ к двумерному контексту, вам понадобится применить JavaScript API. В данном случае, вам потребуется функция getContext. Пример:

Заметьте: в этом примере мы применяем jQuery, но только после того, как страница полностью загрузится. Для этих целей вы можете в полной мере пользоваться вашим любимым JavaScript фрэймворком или поместить скрипт в конец документа.

В результате вызова метода getContext, переменная ctx теперь будет ссылаться на двумерный контекст. Это означает, что теперь при помощи этой переменной вы можете начать рисовать фигуры на элементе canvas. Круто, да?!

Рисуем квадраты

Теперь, когда у нас есть доступ к двумерному контексту, вы можете смело начинать пользоваться всеми функциями вышеупомянутого API. Одной из самых часто используемых функций является fillRect, которая создаёт квадраты чёрного цвета (по умолчанию).

Добавьте следующий код, используя переменную ctx, о которой мы говорили перед этим:

Этот код нарисует чёрный квадрат в левой верхней стороне холста. Примерно вот так вот:

Поздравляю! Вы только что нарисовали вашу первую фигуру в HTML5 элементе canvas. Каковы ощущения?

Заметьте: вы скорее всего уже смекнули, что на самом деле для рисования квадрата используется JavaScript. Это происходит потому, что в функциональности элемента canvas не предусматривается подобного метода (для рисования квадрата). На самом деле квадрат — это тот же самый прямоугольник, у которого все стороны равны.

В методе fillRect может быть прописано 4 параметра:

Первый — это позиция по оси x;
Второй — это позиция по оси y;
Третий — это параметр, отвечающий за ширину;
Четвёртый — это высота.

Если расписать прототип метода в псевдокоде, то он будет выглядеть следующим образом:

Хорошая новость заключается в том, что вы не ограничены в функционале, касающемся заливки. Уточню. Вы можете рисовать прямоугольник с прозрачной заливкой и цветной рамкой.Для этого в JavaScript API предусмотрена специальная функция strokeRect:

Данная функция принимает такой же набор аргументов, как и fillRect. В результате вы получите ещё один квадрат:

Просто. Элегантно. И ещё раз просто! Теперь вы поняли принцип, по которому работает элемент canvas. Все остальные методы подобны этим двум. Их использовать так же просто. Если вам кажется это чем-то примитивным, то не переживайте. Все эти элементы в совокупности могут творить чудеса.

Рисование по схеме

Помимо прямоугольников (которые могут быть нарисованы одним методом из API), вы так же можете рисовать фигуры по собственной схеме. Благодаря схемам вы можете создавать прямые или изогнутые линии, а так же более сложные фигуры.

Чтобы создать полноценную схему, вам необходимо будет воспользоваться следующими методами из API:

beginPath: начало схемы;
moveTo: метод для создания точки;
lineTo: рисует линию от точки до точки, которые были созданы методом moveTo, или до точки от прошлой линии, нарисованной методом lineTo;
closePath: завершить схему.
fill: заполнить фигуру цветом.
stroke: создать контур.

Попробуйте следующий пример:

Данный код нарисует треугольник чёрного цвета:

Те же самые принципы вы можете использовать для рисования фигур, которые вам понадобятся. В следующем уроке, посвящённом данной теме, мы поговорим о более продвинутом рисовании фигур, таких как овалы, кривая Безье и др.

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

Изменение цветов

Итак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в JavaScript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.

Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:

Данный код окрасит квадрат в красный цвет:

Или вы можете изменить цвет рамки квадрата:

Вот вы и научились применять данные методы:

Методы fillStyle и strokeStyle удобны тем, что они используют те же цвета, что и в привычном вам CSS. Это значит, что вы можете использовать RGB, RGBA, HSA, специальные слова (“red”) и шестнадцатеричные значения.

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

Изменение толщины линий

Теперь плавно перейдём от изменения цветов к изменению значения толщины линий. Для данного функционала существует ещё один метод из JavaScript API — lineWidth.

Можете добавить данный код в прошлый пример:

И вот какой у вас получится результат:

Такой же принцип вы можете применить со схемами. К примеру, вы можете изменить пример с треугольником:

И вот что у вас получится:

Также в JavaScript API, существует ещё метод, который позволят вам изменить вид линий. К примеру, lineCap изменяет вид отображения конца линии, а lineJoin изменят отображение углов. Более подробную информацию вы можете найти в спецификации.

Стираем объекты из Canvas

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

В принципе тут всё так же просто; вам нужно всего-навсего воспользоваться очередным методом из JavaScript API. Этот метод называется clearRect. Его задача заключается в том, чтобы сделать каждый указанный пиксель полностью прозрачным.

В этом примере на canvas 500px в ширину и 500px в высоту. Для очищения всей площади, вам необходимо сделать следующее:

В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.

Заметьте: аргументы для метода clearRect точно такие же, как и для fillRect; x, y, ширина и высота.

Если вы не определились с высотой и шириной, то можете писать и так:

Стирание небольших фрагментов

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

На данный момент картина такая:

Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:

Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:

Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.

Идём в ногу со временем

Canvas прост в использовании и изучении

Надеюсь, вы убедились в том, что canvas — это очень перспективный элемент веб страницы. Он позволяет создавать вам изображения, используя чистый код без никаких плагинов. Он прост в использовании и изучении, и на самом деле в умелых руках может превратиться во что-то очень оригинальное.

В следующей статье, мы рассмотрим некоторые продвинутые техники работы с элементом canvas, такими как рисование овалов, кривых линий и других вещей. Если этого будет недостаточно, то в дальнейшем мы расскажем вам, как трансформировать объекты (поворачивать, уменьшать, увеличивать), как работать с изображениями, а так же поработаем с анимацией. Вам будет очень интересно, можете поверить мне на слово.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
Перевел: Станислав Протасевич
Урок создан: 28 Марта 2011
Просмотров: 67072
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Квадратная картинка на CSS

Как сделать на CSS квадратную картинку? Тоесть имеется несколько картинок, одна 500×100, другая 100×500 обе картинки выводятся параметром width:30%; мне нужно сделать их квадратными, height:30%; использовать глупо.

Один из старых трюков с помощью паддинга «распирать» блок в нужной пропорции. В Вашем случае это 1:1. А саму картинку сделать object-fit: cover;

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css вёрстка или задайте свой вопрос.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Сделать все фотографии квадратными через css

Я пытаюсь сделать серию фотографий в квадратных фотографий. Они могут быть прямоугольными по горизонтали (т. е. 600×400) или по вертикали (400×600), но я хочу, чтобы они были 175×175 в любом случае. Моя мысль заключалась в максимальной высоте или максимальной ширине меньшей стороны и не допускала переполнения за пределами 175px на большей стороне. однако у меня с этим проблемы.

возможно ли это с помощью css?

ниже моя попытка, но она дает прямоугольники еще:

5 ответов

вы можете установить ширину / высоту родительского div, а затем установить дочерний тег img В width: 100%; height: auto;

это будет масштабировать изображение вниз, чтобы попытаться соответствовать родителю с соотношением сторон в виду.

вы также можете установить изображение в качестве фонового изображения на div Затем, если вы можете использовать css3, вы можете возиться со свойством background-size. Это атрибуты: contain, cover или specificed height (50%, 50%) (175px, 175px) Вы также можете попытаться центрировать изображение с фоном-позиция

Не знаю, слишком ли поздно или что, но я придумал 100% чистый CSS способ создания квадратных эскизов. Это то, что я пытался найти решение в течение довольно долгого времени, и мне не повезло. С некоторыми экспериментами у меня получается. Основными двумя атрибутами являются OVERFLOW: HIDDEN и WIDTH / HEIGHT:AUTO.

хорошо вот что нужно сделать:

предположим, у вас есть пакет изображений различной формы и размеры, какой-то пейзаж, какой-то портрет, но все, конечно, прямоугольные. Первое, что нужно сделать, это классифицировать ссылки на изображения (эскизы) по портрету или пейзажу, используя селектор классов. Хорошо, предположим, вы хотите просто создать два миниатюры, чтобы сделать это проще. у вас есть:

img1.jpg (портрет) и img2.jpg (пейзаж)

для HTML это будет выглядеть так:

это работает для меня. Просто поместите URL-адрес изображения внутри div.

Похожие публикации:

Как добавить обводку текста в css
Как добавить шрифт в css
Как убрать цвет посещенной ссылки css
Как увеличить рамку в css

Читать:

Как в movavi наложить текст на картинку

Создаем геометрические фигуры с помощью CSS

Что вам понадобится для использования данного руководства

Окружность

Квадрат

Прямоугольник

Овал

Треугольник

Треугольник, направленный вниз

Треугольник, направленный влево

Треугольник, направленный вправо

Ромб

Трапеция

Параллелограмм

Звезда

Звезда (6ти конечная)

Пятиугольник

Шестиугольник

Восьмиугольник

Сердце

Яйцо

Бесконечность

Бабл для комментария

Pacman

Заключение

Комментарии

Рисование фигур с помощью canvas

Сетка

Рисование прямоугольников

Пример создания прямоугольных фигур

Рисование контуров (path)

Рисование треугольника

Передвижение пера

Линии

Дуги

Безье и квадратичные кривые

Квадратичные кривые Безье

Кубические кривые Безье

Прямоугольники

Создание комбинаций

Path2D объекты

Path2D пример

Использование SVG путей

Found a content problem with this page?

Как нарисовать квадрат в css

Простой квадрат через css

Квадрат через css с заливкой фона

Код квадрата css

квадрат css с заливкой фона

Квадрат css с фоно на задним фоне

Задачка — вписать квадрат в квадрат css

Квадрат со скругленными углами

Квадрат крутится при наведении мышки

Как нарисовать квадрат в css

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

Метод rect

Метод fill()

Метод clip()

Метод arc()

Метод arcTo()

Метод quadraticCurveTo()

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

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

Введение в Canvas

Знакомимся с элементом Canvas

Использовать элемент canvas очень просто

Поддержка

Этот элемент только для самых современных браузеров

Размеры элемента Canvas

Немного о двумерном контексте

Система координат

Получение доступа к двумерному контексту

Рисуем квадраты

Рисование по схеме

Изменение цветов

Изменение толщины линий

Стираем объекты из Canvas

Стирание небольших фрагментов

Идём в ногу со временем

Canvas прост в использовании и изучении

5 последних уроков рубрики «HTML и DHTML»