Введение в 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Введение в canvas: продвинутые техники рисования | | 2012-06-19 12:07:26 | | Статьи Web-мастеру | | В прошлой статье мы познакомились с некоторыми простыми техниками рисования элементов. В этом уроке мы углубимся в эту тему.НачалоМы будем использовать тот же HTML шаблон, что и в предыдущем уроке, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: