Главная

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

2012-09-10 в 7:56, admin, рубрики: canvas, html5 canvas, метки: html5 canvas

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

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

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()

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

Заключение

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

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

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

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

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

Автор: Alexei03a