Введение в canvas: продвинутые техники рисования
В прошлой статье мы познакомились с некоторыми простыми техниками рисования элементов. В этом уроке мы углубимся в эту тему.
Начало
Мы будем использовать тот же HTML шаблон, что и в предыдущем уроке, для того чтобы иметь возможность экспериментировать:
<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<!-- Insert fallback content here -->
</canvas>
</body>
</html>
Для тех, кто только к нам присоединился, хочу напомнить, что элемент canvas функционирует на HTML5 и JavaScript. Ничего сложного.
Рисуем окружности
Первое, что мы научимся рисовать в этом уроке, - это окружности. Это не так просто, как вы могли подумать.
Для canvas не предусмотрен метод, позволяющий рисовать окружности, так что нам придётся что-то придумать - ну в общем мы уже это делали, когда имели дело с элементом fillRect. В этом же случае, мы воспользуемся методом arc; Круг - это же в принципе растянутая на 360 градусов дуга. Использование этой функции оправдано т.к. мы можем применять её для рисования, например, полукруга. Зачем тогда нам отдельный метод? Вы так же можете комбинировать работу arc с другими методами, для того чтобы создать форму пиццы.
Ну что же, хватит слов! Приведу пример:
ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI*2, false); ctx.closePath(); ctx.fill();
Вот, что у нас получится:
Не очень сложно, верно? Давайте разбираться в том, как это всё работает.
Метод arc принимает 6 аргументов:
- Первый - это точка x (центр круга);
- Вторая - это точка y;
- Радиус круга;
- Начальный угол окружности;
- Конечный угол окружности;
- Направление прорисовки (false – по часовой стрелке)
Примерно так:
arc(x, y, radius, startAngle, endAngle, anticlockwise);
Если совсем коротко, то мы практически рисуем окружности так же, как мы сделали это при помощи циркуля:
Углы
Наверно нужно сразу сказать о том, что углы в canvas взаимодействуют с радианами. Это означает, что значения могут быть от 0 до удвоенного Пи. Приведу примерную схему:
Если вы не знакомы или вам просто не нравится работать с радианами, то вы можете спокойно работать с градусами, применив следующую формулу:
var degrees = 270; var radians = degrees * (Math.PI / 180);
Кривая Безье
С обычными дугами закончили, однако существует ещё один инструмент, с помощью которого можно нарисовать любую фигуру. Я говорю о кривых Безье и методах quadraticCurveTo, bezierCurveTo. Как я уже упомянул, с помощью данного инструмента вы можете нарисовать любую фигуру, а в умелых руках, она просто творит чудеса.
Для кривых Безье важно создать начальную точку, от которой будет прорисовываться фигура. Для примера quadraticCurveTo содержит одну точку, а bezierCurveTo - две. Лучше взгляните на схему:
Если вы когда-либо работали с программой Adobe Illustrator, то наверняка понимаете о чём идёт речь.
Теперь давайте применим наши знания для того, чтобы создать кривую Безье:
ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(50, 150); ctx.quadraticCurveTo(250, 50, 450, 150); ctx.stroke();
Вот что у нас получилось:
Метод quadraticCurveTo принимает четыре аргумента:
- Позиция x;
- Позиция y;
- Позиция x конца пути;
- Позиция y конца пути;
В процедуральном виде метод quadraticCurveTo выглядел бы так:
quadraticCurveTo(cpx, cpy, x, y);
Давайте ещё поэкспериментируем:
ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(50, 150); ctx.bezierCurveTo(150, 50, 350, 250, 450, 150); ctx.stroke();
Итого:
В свою очередь, метод bezierCurveTo принимает шесть аргументов:
- Позицию x первой контрольной точки;
- Позицию y первой контрольной точки;
- Позицию x второй контрольной точки;
- Позицию y второй контрольной точки;
- Позицию x конца пути;
- Позицию y конца пути;
В псевдокоде bezierCurveTo будет выглядеть примерно так:
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
Благодаря кривым Безье вы можете рисовать самые разные фигуры. Тут вашу фантазию ничего не может ограничить!
К тому же, в Adobe Illustrator есть специальный плагин, который позволяет вам экспортировать код нарисованного элемента, который вы с лёгкостью можете интегрировать в canvas!
Применяем стили
В прошлом уроке я вам продемонстрировал на нескольких примерах, как изменять цвет заливки и границы элементов. Проблема заключалась в том, что изменённый стиль распространялся на все последующие элементы, которые были нарисованы.
Сегодня я покажу вам, как создавать специальные стили, между которыми можно переключаться.
Существует огромное количество свойств, которые отвечают за отображение элементов на холсте. К примеру: globalAlpha, globalCompositeOperation,strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX,shadowOffsetY, shadowBlur, shadowColor, font, textAlign, и textBaseline. Многие из них будут вам незнакомы, но вы не переживайте. В следующей статье мы о них поговорим.
Сохранение стиля
Для того чтобы создать стиль, много мучиться не надо:
ctx.fillStyle = "rgb(0, 0, 255)"; ctx.save(); ctx.fillRect(50, 50, 100, 100);
Концепция довольно-таки проста. После того, как вы создали стиль, просто примените метод save. Я же говорил, что не всё так сложно!
В примере, который вы увидели выше, мы просто меняем цвет фона на синий, а потом сохраняем его как стиль, который в последствии применяем при рисовании квадрата.
Восстановление состояния
Создавать стили - это круто, но вся фишка в том, что мы можем применять их снова и снова. Для восстановления стиля используйте метод restore.
Добавьте следующий код:
ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(200, 50, 100, 100);
Теперь на вашем холсте появится ещё один квадрат, только на этот раз красного цвета:
Этот как раз то, о чём я говорил в начале данной секции. Вы уже знаете, что делать для того, чтобы исправить ситуацию, не так ли?
А теперь добавьте этот код:
ctx.restore() ctx.fillRect(350, 50, 100, 100);
Это было просто, не так ли? Вызов метода restore просто устраняет текущий стиль и восстанавливает предыдущий.
Используем несколько стилей
Теперь вы в курсе, как создать стиль, но что делать, если вы хотите применять несколько?
Добавьте следующий код, чтобы сохранить то, что у нас есть:
ctx.fillStyle = "rgb(0, 0, 255)"; ctx.save(); ctx.fillRect(50, 50, 100, 100); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.save(); ctx.fillRect(200, 50, 100, 100); ctx.restore() ctx.fillRect(350, 50, 100, 100);
Всё вернулось на круги своя:
Для того чтобы восстановить стиль, вам нужно просто запустить метод restore ещё один раз:
ctx.restore(); ctx.fillRect(50, 200, 100, 100);
Итог, который мы ждали:
Если научиться умело применять данные техники, то можно здорово сэкономить время!
Итоги
Я надеюсь, что данный урок помог вам продвинуться с рисованием в canvas.
В следующей статье мы научимся делать трансформации, добавлять тени и применять градиенты. До встречи!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ezE8DA6iDKA/lessons.php
|
В прошлой статье мы познакомились с некоторыми простыми техниками рисования элементов. В этом уроке мы углубимся в эту тему.НачалоМы будем использовать тот же HTML шаблон, что и в предыдущем уроке, |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2026-07-29 » «Адаптация бюджета» в Яндекс Директе: как автоматически масштабировать рекламу без потери эффективности
- 2026-07-29 » Overlay в РСЯ: новый формат мобильной рекламы, который не раздражает пользователей
- 2026-07-29 » «Панорама» в Яндекс Директе: новый уровень охватной рекламы для вашего бизнеса
- 2026-07-29 » Карточки товаров и отзывы на маркетплейсах: что по закону считается рекламой, а что нет
- 2026-07-29 » Комментарии в приватных каналах «Макс»: новый инструмент для бизнес-коммуникаций
- 2026-07-23 » Как ошибки в AI-ответах портят репутацию компании
- 2026-07-23 » Маркировка рекламы в 2026 году: фатальные ошибки, которые обойдутся вашему бизнесу в полмиллиона рублей
- 2026-07-23 » Нейросети в дизайне сайтов и графике: революция, эволюция или угроза?
- 2026-07-23 » РСЯ открыла инструмент авторасстановки рекламы для всех партнеров: как автоматизация меняет правила монетизации
- 2026-07-23 » Контент для стоматологических клиник: какими текстами наполнить сайт, чтобы пациенты записывались сами
- 2026-07-22 » Продающие анимированные баннеры для вашего бизнеса
- 2026-07-22 » Услуги таргетолога по настройке рекламы ВКонтакте (ВК)
- 2026-07-19 » GEO / AISEO / AEO для B2C
- 2026-07-19 » GEO / AISEO / AEO для B2B
- 2026-07-15 » ИИ-агент как сотрудник: права, журнал действий и управление доступом через BearPass
- 2026-07-15 » Как проверить юриста, адвоката или нотариуса онлайн: пошаговое руководство для бизнеса
- 2026-07-15 » Телефон в вашем кармане действительно следит: кто, зачем и как это остановить
- 2026-07-15 » Куки и трекеры: какую информацию о вас собирают сайты и как это отключить
- 2026-07-15 » Почему корпоративный мессенджер — это не роскошь, а необходимость для бизнеса
- 2026-07-15 » Реклама на Авито, которая реально работает
- 2026-07-15 » Реклама на Авито, которая реально работает
- 2026-07-10 » Корпоративный сайт, который показывает масштаб компании, укрепляет доверие и ведет клиента к целевому действию
- 2026-07-10 » Сайт бронирования, который превращает интерес клиента в прямую бронь, запись или заявку
- 2026-07-10 » Образовательный сайт под ключ
- 2026-07-03 » Аналитика нового поколения: как Яндекс Метрика превращает данные в управляемые конверсии
- 2026-07-03 » Прорыв в инфлюенс-маркетинге: Яндекс Директ научился оптимизировать рекламу в Telegram и MAX под реальные продажи
- 2026-07-03 » Нейросетевой дуэт: как Gorgona и Argus меняют правила игры в контекстной рекламе Яндекса
- 2026-07-03 » Рекламная революция в «Яндекс Директе»: с 14 июля текстово-графические объявления окончательно уступают место комбинаторным
- 2026-07-03 » Макс запустил тест комментариев в публичных каналах
- 2026-07-01 » Уникальность текста: когда копировать контент можно, а когда нельзя
"Если технология меняется почти каждый день, нет смысла нанимать человека потому, что он обладает специфическим набором профессиональных навыков - все равно эти навыки скоро устареют. Вам нужно стараться принимать на работу людей, которые обладают широкими универсальными способностями к решению проблем, каким бы трудным это ни оказалось." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.