Предыдущий ролик Следующий ролик  

Видео урок: Состояние Canvas

HTML5: графика и анимация с Canvas

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

Рисующее состояние canvas отслеживает некоторые свойства canvas. Оно отслеживает текущие значения lineWidth, strokeStyle, fillStyle, lineCaps и так далее - все то, что мы уже видели, когда рисовали прямоугольники и линии. Также оно отслеживает то, что называется текущей матрицей трансформации, и мы позже ее рассмотрим, когда будет изучать трансформации. Также оно отслеживает текущую область отсечения, которую мы рассмотрим немного позже.

То есть, оно отслеживает все эти три набора значений, и вы можете их сохранять и восстанавливать. Теперь напрашивается вопрос: зачем вообще все это делать? Ну, в вашем коде может находиться полный набор настроек для рисования, и во время процесса рисования вы можете захотеть сделать незначительное изменение в этих настройках, но вы не хотите все делать вручную, потому что тогда вам нужно запомнить, что здесь вы поменяли lineWidth, а здесь вернули его на прежнее значение. А вот здесь я поменял strokeStyle. А вот здесь я хочу его вернуть на прежнее значение.

Итак, сохранение и восстановление canvas делает все это для вас. Чтобы сохранить и восстановить состояние, вам просто нужно использовать функции Save и Restore. На самом деле, вы вызываете context.save, а затем выполняете новые операции по рисованию, каждая из которых может поменять любое из сохраненных свойств: текущее lineWidth, текущее fillStyle или strokeStyle и так далее. А когда вы закончите, вам просто нужно вызвать context.restore, которая вернет рисующее состояние обратно к тому состоянию, которое было до того, как вы вызвали Save и внесли какие-то изменения.

Давайте посмотрим, как это выглядит в реальном коде, потому что это обычно самый простой способ все понять. Возвращаемся в редактор кода, в файле Snippets я нахожусь в разделе Drawing State вот здесь в главе 05, открываем файл с примером, это будет drawingstate_start. В общем, сейчас мы скопируем эти три строки. Мы просто их копируем и вставляем вот сюда.

Давайте посмотрим, как это выглядит в браузере. Переходим к drawingstart, вот у нас есть прямоугольник, желтый внутри и окаймленный красным. Давайте снова вернемся к кускам кода и скопируем следующую группу строк. Копируем вот эти строки и вставляем их под эти. На данный момент я комментирую все вызовы для сохранения и восстановления, и давайте посмотрим, что будет.

Вот здесь мы нарисовали первый прямоугольник. Он желтый с красной каймой. Затем мы меняем strokeStyle на green, fillStyle на blue, а lineWidth будет 5. Вот мы создаем новый прямоугольник, а потом мы создаем третий прямоугольник. Но мы не установили никаких свойств, продолжаем, сохраняем, возвращаемся в браузер и обновляем страницу. У нас есть три прямоугольника: один желтый с красной каймой и два прямоугольника синие с зеленой каймой.

Возвращаемся к коду. Убираем комментарии с этих двух строк. Убираем комментарий с Restore. Убираем комментарий с Save. Вызов функции сохранения сохранит текущие свойства контекста - в данном случае обрамление, заполнение и ширину строки. Затем вот здесь мы их сбрасываем и рисуем новый прямоугольник, а потом мы их восстанавливаем. Давайте сохраним и вернемся в браузер. Когда мы обновим страницу, вы увидите, что вызов функции восстановления восстанавливает свойства для рисования, которые первоначально были установлены для этого прямоугольника, прежде чем мы поменяли их на вот эти.

Возвращаемся к коду. Мы начинаем с красного и желтого. Сохраняем это. Мы внесли целый набор изменений в в текущий рисующий контекст, а затем мы вызвали функцию восстановления. Она берет из стека оригинальный контекст, который мы сохранили, и тогда восстанавливаются настройки с красным и желтым цветом, позволяя нам снова их использовать. Вы увидели, как можно использовать функции Save и Restore, чтобы управлять состоянием canvas, это сэкономит нам время, когда мы что-то рисуем и вносим повсюду небольшие изменения.

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