Упрощаем работу с HTML5 Canvas — shape.js

HTML5 Canvas — элемент для работы с графикой. Почти все мы начинали с простых fillRect, strokeRect и clearRect, но затем мы переходили на использование Path и картинок, или брались за «тяжелые» библиотеки. Сегодня я расскажу простой способ упростить работу с Canvas элементом.

Начало

Для рисования фигур, например круга мы используем следующую операцию:

  ctx.beginPath();
  ctx.arc(0,0,100,0,Math.PI*2,true);
  ctx.closePath();

И не редко, когда мы используем более одной фигуры, мы вынуждены писать много одинаково или аналогичного кода. Обычные функции не всегда нам могут помочь в этом. Я предлагаю следовать принципу буферов: накопление и/или сохранение операций.

Разбираем код библиотеки

Shape — это JS объект который сначала «накапливает» нужные нам операции, затем применяет их в 2D context у Canvas элемента (заливка, штриховка или обрезание).

Пример и исходники можете найти здесь: github.com/Alexei03a/shape ^[1]

Код нашей библиотеки строится следующим образом:

var Shape = function(){
  this.path = [];
}
Shape.prototype = {
//...
}

Здесь я комментировать не буду.

Накопление операций происходит функцией:

function(obj){
  this.path.push([funcName,obj]);
}

Где:
funcName — имя функции в context
obj — массив аргументов

Вопрос: «а почему не arguments?»
Ответ: arguments лишает нас гибкости, поэтому мы используем обыкновенный массив для гибкости т.е. чтобы аргументы можно было сменить вместо создания нового объекта Shape.

Прежде чем что-либо рисовать, мы должны использовать «пре-процессор». Это делается для того, чтобы 2D контекст «увидел» нашу фигуру.

context.beginPath();
context.save();
this.path.map(function(a){
  context[a[0]].apply(context,a[1]);
});
context.restore();
context.closePath();

После чего мы используем любую из операций:

context.fill()
context.stroke()
context.clip()

То есть заливка, штриховка или обрезание.

Заключение

Благодаря такой библиотеки мы сможем создавать анимации, не используя лишние части кода (за исключением массивов, они нам будут очень нужны).

Моя крутящаяся стрелочка ^[2] была написана путем использования накопителей и массивов аргументов.

В целом, мы могли бы упростить саму библиотеку (использование объектов, arguments и массивы), но это значительно усложнило бы наш код. Впрочем, это зависит от вашей фантазии.

WhatWG также в спецификации ^[3] описал объект Path, однако наш shape.js совершенно не похож на тот самый Path, который описал whatwg. Впрочем вы можете доработать мою идею в соответствии спецификации. Я лишь просто рассказал как можно сделать работу с Canvas проще. Я не гарантирую повышение производительности.

UPDATE! Я улучшил свой вариант shape.js и теперь он стал более гибок и более похожа на библиотеку JS. Вы можете не только написать свой вариант shape.js и подглядеть у меня.
Ссылка на Github по прежнему здесь: github.com/Alexei03a/shape ^[1]

Автор: Alexei03a