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

Накладывается круг на квадрат, т.к. круг по коду прописал позже, а значит — отображаться он будет верхним
(если иное не задать в значении команды).

Указал все возможные значения этой команды в таблице, в ячейки которой вставил тэги (с идентификаторами!) .

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

Кстати! Здесь можно НЕ центрировать! В HTML-коде таблицы уже есть центрирование.

Разноцветные круги с обводкой

В этом примере с помощью функции JavaScript нарисовал несколько кругов разного размера и цвета.
Подробности об их создании написал ниже.

Разноцветные сектора

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

Аналогично. Об их создании можно узнать ниже. смотреть сразу:

Прямоугольники с тенью

Нарисовал их, как и все (кроме таблицы наложений 2-ух рисунков) показанные примеры, на одном холсте. В коде есть комментарии, какой к какому относится.

Рисунок с линейным градиентом

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

var gradient = context.createLinearGradient(x1, y1, x2, y2);

В параметрах команды задаются координаты точек, по которым он будет проходить, т.е. из точки x1, y1 в точку x2, y2 .

Задаём цвета несколькими командами gradient.addColorStop(offset, «color»);

В них offset — отступ задаётся со значениями от «0» до «1», а «color» — нужный цвет.

Далее, созданный градиент командой context.fillStyle = gradient; мы определяем для ранее созданной переменной градиента, как стиль заливки.

И, наконец, командой context.fillRect(x1, y1, x2, y2); рисуем прямоугольник для его заливки в самом начале созданным градиентом.

Важно! Координаты нарисованного прямоугольника должны совпадать с координатами созданного градиента.

Рисунок с радиальным градиентом

В принципе, мало чем отличается от примера, показанного выше. Разница в значении глобальной переменной, предназначенной для хранения создаваемого градиента.

var gradient = context.createRadialGradient(x1, y1, r1, x2, y2, r2);

В параметрах команды задаётся плавный переход цвета из окружности с центром в точке x1, y1 и радиусом r1 в окружность с центром в точке x2, y2 и радиусом r2 .

В результате получается вот такой шар с бликом и тенью.

Видимость (прозрачность)

Прозрачность, насыщенность рисунков в JavaScript задаётся специальной командой.

В этом примере написания команды указано: полная видимость.

А вообще же, значения данной команды могут находиться в диапазоне от 0 до 1 , где 0 — полная прозрачность, 1 — полная видимость.

Дробные значения указываются через точку
( 0 перед точкой можно не ставить).

Кстати! Подробно, с визуальными примерами работы разных фильтров, можно посмотреть здесь: «Прозрачность элементов» (откроется в новом окне) .

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

Ну, а пример работы упомянутой команды js-кода вот он.

Вывод изображения (растрового)

А так выводятся растровые изображения, адрес которых можно прописать между тэгов .

Не забывать! Присвоить идентификаторы и изображению, и тэгу canvas.

Далее применяем функцию window.onload = function() , в коде которой задаётся вывод нужного изображения командой (действием) ctx.drawImage(img, 10, 10);

Важно! Обычным образом (без скрипта) браузер ничего не покажет, что бы мы ни писали в коде рисунка между тэгов . Пробовал!

Добавлял в тэг атрибуты width и height с разными значениями. Результат всегда был один. Скрипт выводил оригинальные размеры рисунка!

А за его видимость, т.е. позиционирование на холсте, отвечают два последних параметра команды ctx.drawImage(img, 10, 10);

Кстати! ctx — это сокращённое context

Текст

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

var mText = «Это canvas и JavaScript!»;

А так текст выводится скриптом на экран.
↓

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

Квадрат и круг (взаимодействие 2-ух холстов)

Все строчки кода данного примера подробно прокомментировал в исходнике. Чтобы немного отдалить холсты с рисунками друг от друга, использовал символ неразрывного пробела » » между ними.

Это красный квадрат: Это синий круг:

Интересен показанный пример тем, что в нём хорошо видно: оба холста прекрасно «уживаются» на одной строчке веб-страницы. При соответствующих их размерах, разумеется.

Линии

Этот подраздел страницы отвёл под изучение методов рисования разного вида линий. Это, пожалуй, один из самых важных навыков , который нужно освоить для того, чтобы научиться рисовать в JavaScript.

Поэтому, сначала немного теории.

Список команд рисования

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

«Путь» — «Path» — определяет очертания рисунка, который может быть закрашен, то есть залит цветом, и/или обведён контурной линией (*см. список) .

• context.beginPath(); — начало нового пути (начало рисования)← часто можно и БЕЗ этой команды.
• context.moveTo(); — устанавливает начальное положение пути (начальная точка рисования линии).
• context.lineTo(); — проводит линию, начиная от текущей позиции и до указанной точки.
• context.lineWidth = number; — (числовое значение) задаёт толщину линии.
• context.lineCap = «round»; — стиль конца линии (здесь — «круглый»).
• context.lineJoin = «miter»; — стиль соединения двух линиий (здесь — «острый»).
• context.miterLimit = number; — (числовое значение) ограничение длины соединения двух линиий.
• context.arc(); — рисует дугу (часть окружности).
• context.arcTo(); — определяет дугу, начиная от текущей позиции.
• context.quadraticCurveTo(); — определяет квадратичную кривую от текущей позиции.
• context.bezierCurveTo(); — определяет кривую Безье от текущей позиции.
• context.closePath(); — завершает путь (конец рисования линии).
• context.fillStyle = «color»; — устанавливает цвет заливки рисунка (color — значение цвета).
• context.fill(); — заливает рисунок установленным цветом.
• context.strokeStyle = «color»; — задаёт цвет обводки, т.е. цвет контура.
• context.stroke(); — очерчивает рисунок контуром (вывод нарисованного на экран ).
• context.clip(); — ограничивает область видимости нарисованного.

Подробности написания этих команд лучше всего смотреть в исходном коде примеров рисования.
К тому же — сами примеры наглядно демонстрируют их действие.

Работа с командами, имеющими «To» , напоминает рисование карандашом БЕЗ отрыва от бумаги. А вот команда moveTo() позволяет оторвать от «бумаги» такой «карандаш», поставить его в какую-нибудь новую точку, и рисовать снова.

Необходимо отметить, что позиция отрисовки, в которой заканчивается одна из команд с «To» — lineTo(), bezierCurveTo() и т. д. , одновременно является и начальной позицией для следующей рисовальной команды с «To».

Ширина линии задаётся командой context.lineWidth , где единица соответствует одному пикселю. Значение по умолчанию — 1.0

Стиль концов линии определяет команда context.lineCap , и она может иметь три возможных значения (*см. список) .

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

Пример рисования простых линий

Нарисовал с помощью команд JavaScript несколько линий: прямых, соединяющихся, и ниже вывел их на экран.

Соединение линий

Стиль соединения линий задаётся командой context.lineJoin , и может принимать тоже три возможных значения (*см. список) .

Наглядная памятка значений здесь:

А ниже я нарисовал, и вывел их с помощью JavaScript. В код рисунка вставил комментарии, какой блок кода к какому примеру относится.

Ограничение длины соединения

Можно ограничить длину соединения линий с помощью команды ctx.miterLimit .

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

Эта команда используется, только если для lineJoin выбран тип «miter»

Допустимые значения команды находятся в диапазоне 1÷255px (все остальные значения будут скриптом округляться до 1 или 255 ).

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

По умолчанию ctx.miterLimit = 10.0; .

В данном примере я установил значение 25 пикселей.

Рисование с помощью прямых линий

Теперь, изучив самые основы рисования в JavaScript, уже вполне возможно и нарисовать что-нибудь простое с помощью обычных прямых линий. Примеры ниже.

Рисуем трезубец

Здесь нарисовал трезубец, очень похожий на корону. О том, как «покрасил» её в золотой цвет и обвёл её контур, подробно написал в комментариях к коду.

Важно! Не забывать! Задав, к примеру, цвет заливки с помощью команды context.fillStyle = «gold»; (золотая), нужно обязательно запустить саму заливку командой context.fill(); .
Иначе никакой заливки цветом НЕ получится! То же самое касается и обводки.

Если же просто (без задания цвета заливки) прописать команду context.fill(); — зальётся чёрным (по умолчанию).

Рисуем домик

А здесь — всего из нескольких линий у меня получился маленький домик с голубыми стенами и чёрной крышей. В его коде я всё подробно прокомментировал.

Важно знать! Если прописать команду заливки «крыши» context.fill(); в самый конец кода, то рисунок весь зальётся чёрным цветом. Весь, кроме половинной толщины «стен» (обводки) .

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

Проще всего изогнуть прямую линию, прописав её дугой. Делается это с помощью команды context.arc() , в которой можно задать шесть значений (*см. список) .

• centerX — координата «X» центра дуги.
• centerY — координата «Y» центра дуги.
• radius — размер радиуса окружности, по которой рисуется дуга.
• startAngle — начало дуги (*в радианах!) .
• endAngle — конец дуги (*в радианах!) .
• anticlockwise — направление дуги по или против «часовой» (*булево значение) .

*Prim! Параметр anticlockwise сейчас установил в значение «false», т.е. рисовать по часовой стрелке, но можно было бы его и НЕ задавать.

По умолчанию — это значение и так стоит в «false», т.е. рисует по часовой стрелке, а если выставить ему «true», тогда будет рисовать против часовой.

Пример дуги вывел на экран, а подробности её создания в комментариях к коду.
Обратить внимание!
В этом коде прописал значения переменных в одном(!) var — через запятую.

Сделал пособие (схему) для рисования различных дуг:

А здесь привёл вычисления, которые могут понадобиться для пересчёта из одних единиц в другие.
Из градусов в радианы: var radians = degrees * Math.PI / 180;
И из радиан в градусы: var degrees = radians * 180 / Math.PI;

Полезное(!) тригонометрическое пособие (схема) для расчёта и рисования всевозможных окружностей, их секторов и дуг находится здесь:

Угловая линия

Закругление углов линии рисуется с помощью команды context.arcTo() , которая принимает пять обязательных параметров (*см. список) .

• xPos + width — первая координата «X» начала дуги.
• yPos — координата «Y» начала дуги.
• xPos + width — вторая координата «X» конца дуги.
• yPos + radius — координата «Y» конца дуги.
• radius — радиус дуги.

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

Но принципы рисования угловых линий те же самые, что и в предыдущем примере.

Кривые Безье

Сначала немного о самих кривых.

Есть две команды, для построения квадратичной (1-ая) и кубической (2-ая) кривых Безье.

context.quadraticCurveTo(Px, Py, x, y);
и
context.bezierCurveTo(P1x, P1y, P2x, P2y, x, y);

x и y — это точки, в которые нужно поставить «карандаш», а координаты Px и Py в квадратичной кривой — это дополнительные точки, используемые для её построения.

В кубической кривой, соответственно, имеются ещё две дополнительные точки.

Ниже нарисовал сразу два типа кривых Безье, а в коде рисунка сделал комментарии, какие строчки отвечают за какую из них.

*Prim! Строчки кода можно менять местами . Результат один и тот же.

Цветные кривые Безье

А в этом примере рисования я раскрасил аналогичные (с такими же параметрами) кривые Безье в разные цвета, и изменил их толщину.

Сделать такое НЕ сложно, однако к коду каждой кривой добавились нужные команды, и здесь, ради пробы, поменял блоки кода местами (*см. примечание предыдущего примера) .

Ограничение области видимости

Ограничить область видимости можно командой context.clip(); .

Важно знать!

Она ничего не рисует, но после её добавления, любой объект будет виден только в том случае, если он находится внутри области , на которой определён путь.

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

*Prim! Если «закомментировать» эту команду, то увидим, как на самом деле нарисованы линии.
А на самом деле — они далеко выходят за границы круга, и соединяются там.

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

В следующем примере использовал линии для отрисовки закрашенного треугольника в верхнем левом углу и контурного треугольника в нижнем правом. Установил размер холста 500 X 500 пикселей.

Кстати! Для закрашенного треугольника уже не потребовалась команда ctx.closePath() , поскольку ctx.fill() — автоматически закрывает путь.

Prim* Пробовал и здесь прописать закрытие. Результат такой же!
Однако, иногда разница есть. Поэтому всё же лучше закрытие прописывать!
Пример такой разницы смотреть ниже:

Думаю, хоть они и чрезвычайно важны для освоения основ рисования в JavaScript, хватит заниматься линиями. Нужно изучить и другие возможности этой технологии.

Круги, сектора, квадраты

В этом подразделе привожу несколько примеров объектов, нарисованных с помощью разных методов JavaScript.

Частично залитые круги

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

Рисунок №1. Частично залитый круг

Рисунок №2. Разная заливка круга

Рисунок №3. Круг из залитого сектора и цветного контура

Сектора кругов

С помощью команды arc() можно рисовать целые окружности и их сектора, а также различные дуги.

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

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

Дальше javascript-код отрисовывает два ряда секторов кругов. В обоих рядах я начинаю с 0 радиан , и увеличиваю каждый следующий сектор на endAngle .

В первом (зелёном) ряду отрисовка секторов проходит по часовой стрелке, а в нижнем (синем) — против часовой.

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

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

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

В этом подразделе привожу два примера квадратов со скруглёнными углами. Сначала показываю их контура, а после — их же, но уже залитые цветом (по умолчанию чёрным).

Рамку для холстов здесь сделал с помощью CSS вне тэгов canvas.

Важно! ctx — это сокращённое context Можно использовать либо одно, либо другое написание в кодах, НО(!) в одном коде должно быть одинаково!

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

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

Кстати! Если в коде прописана команда заливки ctx.fill() , то команду обводки ctx.stroke() в данном случае (с чёрными квадратами) можно уже НЕ прописывать.

А вот с командой закрытия ctx.closePath(); — аккуратнее!

Если в данном случае её НЕ прописать, то эти чёрные квадраты станут отображаться чуть по-другому! Пробовал!

А поэтому, хоть в коде рисунка и присутствует команда заливки цветом ctx.fill() , которая по правилам рисования в JavaScript должна автоматически закрывать путь, нужно всегда всё проверять!

Взаимодействие canvas и JavaScript

Возможности «дуэта»: тэг canvas + JavaScript не ограничивается лишь рисованием.

Интересно, что JavaScript позволяет не только рисовать внутри этого элемента, но и очищать его от нарисованного.

Их взаимодействие можно посмотреть и проверить здесь:

Использование тэга canvas и JavaScript

Эта технология работает с пикселями. Её ещё называют «динамический PNG», поэтому чаще всего этот тэг используют для создания динамических рисунков, т.е. таких, которые должны изменяться в режиме реального времени.

Рисовать в HTML можно, и даже гораздо проще, используя тэг svg, когда изображение постепенно появляется в процессе написания кода. Можно легко править этот код, наблюдая, как изменяется рисунок.

А вот рисовать в JavaScript таким образом не получится!

Нужно прописать весь код рисунка до самого конца, чтобы он появился наконец-то на веб-странице.
Тем не менее, эта технология рисования используется, причём, довольно успешно!

Где и когда? А вот где.

Полезно! Отличную статью о том, когда лучше использовать тэги canvas, а что предпочтительнее делать тэгами svg, я нашёл на сайте помощи Microsoft™.

Давал уже скачивать эту статью на странице «Рисование в HTML» , но, думаю, она и тут будет весьма кстати!

Взять её можно здесь:

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

По нижним навигационным стрелкам можно либо вернуться в раздел «JavaScript», к которому относится данная страница, либо посетить «Учебные сайты» , где есть много другой, разной и интересной информации.

Верхний мини-навигатор позволит выбрать любой из разделов, относящихся к программному рисованию в HTML.

Все права защищены. Copyright © 2009 — Коротеев Владимир.

Источник