Введение в 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
Новые статьи и публикации
- 2025-12-02 » Когда ошибка молчит: как бессмысленные сообщения ломают пользовательский опыт
- 2025-12-02 » 9 лучших бесплатных фотостоков
- 2025-12-02 » UTM-метки: ключевой инструмент аналитики для маркетолога
- 2025-12-02 » ПромоСтраницы Яндекса: Что такое и для чего служит
- 2025-12-02 » Метатеги для сайта: исчерпывающее руководство по Title, Description, Canonical, Robots и другим тегам
- 2025-11-26 » Оценка эффективности контента: превращаем информационный балласт в рабочий актив
- 2025-11-26 » 10 причин высокого показателя отказов на сайте
- 2025-11-26 » Когда и зачем обновлять структуру сайта
- 2025-11-26 » Скрытые демотиваторы: как мелочи разрушают эффективность команды
- 2025-11-26 » Зачем запускать MVP и как сделать это грамотно?
- 2025-11-20 » Половина российских компаний сократит расходы на транспорт и маркетинг в 2026 году
- 2025-11-20 » Перенос сайта с большим количеством ссылок
- 2025-11-20 » Перелинковка сайта: Что такое и как ее использовать
- 2025-11-20 » Критерии выбора SEO-специалиста и подрядчика для продвижения сайта
- 2025-11-20 » Применение искусственного интеллекта в рекламных агентствах: комплексное исследование трендов 2025 года
- 2025-11-19 » Геозапросы по-новому: как покорить локальное SEO с помощью ИИ
- 2025-11-14 » Консалтинг: сущность и ключевые направления
- 2025-11-14 » Онлайн-формы: универсальный инструмент для сбора обратной связи
- 2025-11-14 » Факторы конверсии органического трафика
- 2025-11-14 » Планирование рекламного бюджета: самостоятельный подход
- 2025-11-14 » Авторизация на сайте: как выбрать решение для удержания клиентов и сохранения продаж
- 2025-11-13 » Эффективные методы стимулирования клиентов к оставлению положительных отзывов
- 2025-11-13 » Налоговая реформа — 2026: грядущие изменения для предпринимателей
- 2025-11-13 » Альтернативы мессенджерам: что выбрать вместо Telegram и WhatsApp
- 2025-11-13 » Маркировка рекламы для начинающих: полное руководство по требованиям ЕРИР
- 2025-11-13 » ИИ не отберет вашу работу — её займет специалист, владеющий искусственным интеллектом
- 2025-10-29 » Как оценить эффективность работы SEO-специалиста: практическое руководство для маркетологов и владельцев бизнеса
- 2025-10-29 » Киберспорт как маркетинговый инструмент: стратегии привлечения геймеров
- 2025-10-29 » Как говорить с аудиторией о сложном
- 2025-10-29 » Что такое доказательства с нулевым разглашением (ZKP) и их роль в блокчейне
Лично я люблю землянику со сливками, но рыба почему-то предпочитает червяков. Вот почему, когда я иду на рыбалку, я думаю не о том, что люблю я, а о том, что любит рыба. (Дейл Карнеги / БИЗНЕС) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.