jCanvaScript: JavaScript библиотека для работы с html5 canvas

imageВсем доброго!
jCanvaScript — это, как видно из «картинки для привлечения внимания», JavaScript-framework. Не трудно, я думаю, догадаться из названия топика, что предназначение библиотеки — работа с элементом HTML5 canvas. Под катом всех заинтересовавшихся ждет небольшой рассказ о библиотеке и о том, как она создавалась.

Прочитал я как-то где-то в сети, может даже и здесь, на Хабре, в очередной раз про canvas — и сел рисовать. Это оказалось просто, но не очень удобно. Ну и ладно — была первая мысль, это мелочи, попробую-ка я создать что-нибудь анимационное. Создавать анимацию тоже оказалось просто — при условии, конечно, что сама анимация проста и ей не надо управлять. В общем, чем дальше в лес — тем больше дров. Надо было что-то менять.
Сначала появились обертки для рисования примитивов, потом сформировался прототип библиотеки (с фабрикой объектов внутри), в него постепенно добавлялись функции — для начала просто доступ к возможностям canvas API. Затем захотелось работы с событиями… Время шло, библиотека росла.

Итак, что же мы имеем на сегодняшний день?

Небольшую, около 36kb (размер версии 1.0) в сжатом виде, библиотеку, предоставляющую удобный интерфейс для взаимодействия с canvas. Описывать интерфейсы я в рамках данной заметки не буду, поскольку о них достаточно сказано, к тому же с кучей примеров, на официальном сайте проекта. Зато упомяну о том, что библиотека самодостаточна, то есть не требует подключения никаких дополнительных библиотек и не является расширением какой-либо из них — да, это не удивительно, так и должно, пожалуй, быть, но тем не менее. Как-то последнее время популярнее плагины писать.
Еще упомяну про то, что:
  • Конечно же, на объекты можно навешивать события мыши, клавиатуры и фокуса.

    Например:

    jc.circle(x,y,radius)
    	.click(function(){
    	//какой-нибудь код	
    	});
    

  • Конечно же, drag'n'drop уже реализован. Код не буду приводить, скажу лишь, что используются draggable и droppable функции, примерно как в jQuery.

  • Естественно, (JavaScript, как-никак) вы можете использовать цепочки методов.

    Вот так:

    jc.circle(x,y,radius)
    	.up('top')// тут мы кружок на передний план перемещаем
    	.id('myCircle')//тут присваеваем id
    	.name('myCircles'); //а тут присваеваем ему имя
    


  • Да, элементам можно присваивать идентификаторы (id) и имена (name), чтобы затем к ним обращаться индивидуально (в первом случае) или как к группе (во втором случае).

    Например, обратиться к кругу из последнего примера можно так:

    jc('#myCircle').color('rgba(255,255,0,0.5)');//выбираем элемент по id и устанавливаем ему цвет
    jc('.myCircles').color('rgba(255,255,0,0.5)');//выбираем группу элементов по name и устанавливаем им цвет
    

Библиотека постоянно дописывается, рефакторится и прочее. Это означает, что там есть еще что менять в коде, с одной стороны — и то, что будет добавлено еще очень много всего, с другой. Пожелания и идеи приветствуются — пишите на support@jcscript.com. Баг-репорты — туда же, их жду с еще большим нетерпением.

Да, напоследок еще немного кода — тоже очень простого. Как нам нарисовать красный кружок на canvas и заставить его перемещаться до некоторой точки за некоторое время, постепенно меняя цвет на зеленый? А вот так:

jc.circle(x,y,radius,'#ff0000',1)
	.animate({x:x1,y:y1,color:'#00ff00'},time);


Конечно же, все это заработает только при наличии jCanvaScript, а в Internet Explorer — понадобится вдобавок exCanvas.

P.S. Честно говоря, я собирался еще немного погодить с анонсом — сайт не до конца проверен на грамотность, но на прошедшей конференции #html5camp несколько раз поднимался вопрос о framework'е для работы с canvas, что заставило поторопиться. Там, кстати, проходили посты в twitter о jCanvaScript, но отклика получено не было. А откликов хочется.)

UPD: GitHub, twitter
Поделиться публикацией

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 78

    0
    Хорошее начало, удачного развития!

    Но видно, вы очень торопились выкладывать библиотеку: начиная с ошибок в текстах и неверных английских оборотов, неопределённостью то ли это фреймворк (в описании), то ли библиотека (в лого) и заканчивая фразой вроде «Fully Object Oriented» (что, конечно же, не так) и iPhone/iPad поддержкой (когда базовый пример на iPhone 4 почти не шевелится).
    В общем, делать и делать.
      0
      Спасибо.
      Работы на самом деле еще очень много. Надеюсь, меньше ее не станет.
      Тексты в данный момент проверяются, исправляются.
        0
        И, поправьте если ошибаюсь, взяли лицензионное описание у проекта jQuery :) (что не противозаконно)
          +1
          Не сложно заметить, наверное, что я вообще часто в сторону jQuery поглядывал.
        0
        Хотелось бы увидеть побольше кода.
          +2
          Какого кода вам бы хотелось побольше увидеть? Если примеров — то их много в документации. Если самой библиотеки — то ее можно скачать и посмотреть.
          +14
          нарисуйте мне обьект с дыркой( pbuffer и composing operations вы забыли)
          еще линию пунктирную и танк, чтобы ехал( группы, согласованные анимации )
            +6
            Вот таких бы комментариев побольше.
            Все будет)
            0
            а где фибэк оставлять? — кнопки Play и Stop визуально не показывают нажатие

            в целом похвально, а сколько разработка заняла по времени?
              0
              Спасибо за замечание — кнопки поправлю. Фидбэк можно оставлять в разделе "контакты"
                0
                Да, сколько заняла именно разработка — сложно сказать. От возникновения идеи минуло около полугода.
                –2
                Мне кажется вы идеалогически немного неправы.
                Для таких вещей SVG подходит гораздо больше. Там не надо городить абстракций, нормальные объекты есть изначально.

                Делали какие нибудь замеры производительности? Ваш слой абстракции не убъет преимущество в скорости canvas'a?
                  0
                  На счет SVG — мне кажется, спорный вопрос.

                  Замеры производительности — это отличная тема для еще одного топика.
                    +3
                    Уже было)
                      0
                      Не вижу на графике производительности jCanvaScript))
                        0
                        Реализация всего 1 браузера. С тех пор кстати в ФФ и ИЕ появилось аппаратное ускорение.

                        Тем более по графику — оба тормозы.
                          +2
                          По графику оба тормозы? Вот только SVG в десять раз тормознее, чем Canvas.
                          На аппаратное ускорение полагатся не очень корректно. Заработает далеко не у всех.
                          Да и показывает оно тенденцию.
                          Если вам не нравится этот тест — предоставьте аналогичный, или возьмите сырцы того, что предоставлен по ссылке (клините на изображение) и протестируйте сами в любимом браузере.
                            +1
                            И, между прочим, по ссылке есть данные для
                              +1
                              Safari 4.0.3, OS X
                              Firefox 3.6, Windows XP
                              Chrome 4.0.249.89, Windows XP
                              Internet Explorer 8, Windows XP
                                0
                                На последнем 10-м хроме Canvas — 4fps, SVG — 42. IE 9 RC1: Canvas — 42 fps, SVG — 34. В среднем, конечно.
                                  +1
                                  4 fps в Хроме? Что-то вы лукавите. У меня 11.0.672.2 dev —
                                  SVG vs Canvas = 6 vs 15
                                    0
                                    Я не лукавлю. Правда, так. Вообще, я включил аппаратное ускорение. Может оно недоделано пока.
                                      +1
                                      Ну как может быть в Хроме 4 фпс? Простите, но я не представляю, как это может быть)
                                        0
                                        Не знаю, у меня нет объяснения.
                                          0
                                          На той ссылке, которую вы дали вообще 0,6 fps. Кстати, когда выключил аппаратное ускорение стало 10 fps.
                                            +1
                                            Потому плохо полагатся на аппаратное ускорение. Например, у меня, вообще видеокарта только портит всё. Даже в игрушках на C
                                              0
                                              А какая у вас видеокарта? Линукс?
                                                +1
                                                Radeon x1600. Windows/Linux, DirectX/OpenGL — одна фигня. Игры, более-менее использующие видяху — ложат UI. Подозреваю, что проблема железная, т.к. все попытки установки более свежих драйверов, других ос и т.п. заканчивались одним и тем же. Даже UI винды портится с аппаратным ускорением =(
                                                  0
                                                  Печальная история, но вы ведь понимаете, что ориентироваться на неё не нужно.
                                                  А так любая старая видеокарта если она работает нормально спокойно тянет и UI винды и аппаратное ускорение SVG, canvas.

                                                  Например? проверял на GT 7300.
                                                    +1
                                                    Ну да, у меня, скорее, исключительная ситуация. Но есть всякие ноутбуки, компы на работе и кучу других штук со встроенной видяхой и неплохим процом ;)
                                                    В любом случае, Flash неплохо работает без аппаратного ускорения. Canvas — тоже может, а SVG — не может )
                                                      0
                                                      Flash работает так хорошо, что его хают все кому не лень)
                                                      Ну canvas на данный момент немного лучше согласен, но ставить крест на SVG не стоит.
                                                        +2
                                                        Ну ладно, давайте на этом закончим. Впринципе, позиции понятны, у каждого есть свои аргументы, которые стоит брать во внимание и отталкиватся от ситуации.

                                                        Просто лично мне не нравится, что в каждом топике про Canvas обязательно всплывёт комментарий про SVG, который уже обогнал по раздражительности комментарии про Kohana-любимая
                                            0
                                            на тех тестах что с тенями, в SVG теней нет. Поэтому SVG 40, Canvas 4

                                            Может из за этого.
                                    0
                                    Ну и толку что в 10 раз быстрее? Если оба тормозы без аппаратного ускорения.
                                    Вот результаты на IE9, (FF4 у меня без включенного аппаратного ускорения 2 бета)
                                    1000
                                    svg -21
                                    canvas — 24
                                    2000
                                    svg — 10
                                    canvas — 13

                                    10 раз? Я готов жертвовать 3 FPS для удобного интерфейса. К тому же лишний слой абстракции сабжа не убъёт ли эти 3 FPS?
                                    Кстати узкое место отнюдь не графика, а процессор.

                                    >>На аппаратное ускорение полагатся не очень корректно
                                    Очень даже корректно. Такая работа с графикой должна обрабатываться на видеокарте. Браузеры которые этого не обеспечат — сами виноваты.
                                      +1
                                      Проблемы бывает не только в браузерах.
                                      Flash работает без ускорения. И последние версии браузеров отлично рендерят канвас без ускорения. Вполне можно использовать.

                                      Кстати, почему у вас результат работы с аппаратным ускорением такой же, как у меня — без аппаратного? Просто интересно. Я думал, будет все 60 fps.
                                        0
                                        В процессор упирается. Он у меня довольно слаб. Ну и в IE 9 JS движок слабее чем в Хроме.
                                        Разные узкие места.
                                          +1
                                          А какой проц? Просто для статистики.
                                            0
                                            c2d e4300
                              0
                              канвас в среднем работает от 2х до 6ти раз быстрее чем SVG, в случаях сильного выхода объектов за пределы viewport — может и в 20 раз быстрее. (webgl из-за нормального интерфейса может работать еще быстрее — в нем, почему-то, DIPы продуманы)
                              А также сильно быстрее может менять набор отображаемых обьектов( создание ноды это долгая операция )
                              Главное не забывать что канвас работает в тысячу раз быстрее VML, и все ваши крутости на дефолтном браузере — пшых.
                                0
                                SVG — тормозилово.
                                0
                                У меня один вопрос, чем это лучше замечательной Raphael JS?
                                  +1
                                  Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object…

                                  Их нельзя сравнивать, на мой взгляд.
                                    0
                                    HTML5 это конечно хорошо, (когда он будет полноценно поддерживается всем и вся) но сейчас Raphael значительно лучше на мой взгляд чем canvas
                                      +2
                                      Ну смотрите. Пару дней назад был топик "Canvas Indicator". Я сужу по своему Фоксу. Этот индикатор отъедает 5% проца, но его можно отрисовать в буфер и показывать из буфера, тогда он будет отъедать 1% проца при любом количестве объектов.
                                      В комментах тоже было про либу Рафаель. Почему то многие комментаторы вспоминают эту либу. Но лично у меня она ассоциируется только с зависшим браузером. Потому что тот-же индикатор жрет намного больше. А если точно, то приблизительно 1% Core 2 Duo на каждую единицу Dashes:

                                      И покажите хотя бы одну игрушку на SVG. Ну не предназначен SVG для анимации. Его удел — рисовать статические векторные картинки. Ведь оптимизировать его никак нельзя. А где хоть легкая динамика — там хоть вешайся.
                                        0
                                        Внезапно, но с аппартным ускорением очень даже -1

                                          0
                                            +2
                                            О да, видел я этот кошмар. Демонстрация убогости платформы. Сравните даже с этим: www.kevs3d.co.uk/dev/asteroids/
                                            Жаль, что Астероиды на LibCanvas сейчас недоступны.
                                              0
                                              Никто не мешает сделать ровно то же на SVG, просто народ повально увлёкся канвасом. Это как с XHR. Этой технологии сто лет в обед, а кроме нескольких людей о ней и не знал никто, пока google не показал её мощь.
                                                +2
                                                Почему-то не сделали. И многие очень любят говорить: «Сделать — фигня! Подумаешь, спрайты поставить». Вот только почему-то нито не делает. И топики на StackOverflow создают: "У меня 5 летающих квадратиков на SVG — тормозят". Потому-что Канвас оптимизировать намного легче, чем SVG.
                                                  0
                                                  Потому что нет аппартого ускорения. В в примере гораздо больше квадратов летает и ничего не тормозит.

                                                    +1
                                                    То есть, вы утверждаете, что SVG без аппаратного ускорения — нежизнеспособен?
                                                      0
                                                      Ну раз уж вы так к этому клоните — В данный момент SVG без аппартного более нежизнеспособен чем Canvas.

                                                      Ждем релизов IE9 и FF4. Ну и Chrome явно что то выкатит.

                                                      Кстати почему выши астероиды в маленьком окошке и не масшатабируются на весь экран?
                                                        +1
                                                        Это не мои астероиды) Ctrl+колесико мышки — не?
                                                        Как только вспомните о масштабируемости векторной графики — насколько она будет мастабируемой при использовании спрайтов, без которых не обходится ни одна более-менее серьёзная игрушка?
                                                        Как только вспомните о Флеш-игрушках, которые отрисовываются векторными картинками — как вы думаете, почему в большинстве случаев их все-равно переводят в пиксельные в целях оптимизации, жертвуя мастабируемостью?
                                                          0
                                                          Неправильно выразился) Не нужно менять размер спрайтов — пусть останутся такими же. Игровое поле должно занимать весь экран браузера.

                                                          >>Ctrl+колесико мышки — не? Не. Монитор не квадратный.
                                                            +1
                                                            А на большом поле разве не будет менятся геймплей? Чем больше поле — тем больше нужно астероидов. Или тем большие нужны астероиды? Это ведь не стратегия, где вне экрана есть действие.
                                                              0
                                                              Ну наверное у тех у кого экран больше будет небольшое преимущество.
                                                              Но это думая не основная причина почему поле такое маленькое, а то что если сделать игру чуть побольше она начнет тормозить… Во всяком случае все canvas игры которые я видел были жестко вписаны в небольшие пространства.
                                                                +2
                                                                Ну допустим так оно и есть. Но ведь во Флеше и СВГ — та же ситуёвина. Возьмём к примеру Armor Games. Что я вижу? Все игры в пределах 800*600. Обычно — меньше. Почему? ;)
                                                                  0
                                                                  Ну во флэше все таки немного лучше.
                                                                  Но в целом да. Я это к тому что нет смысла называть SVG тормозиловом, а Canvas — панацеей от всех тормозов.

                                                                  Какой бы быстрый браузер не был — без аппартного ускорения подобных вещей никак. Ну и аппаратное ускорение без очень быстрого JS тоже плохо.
                                                                  Ну и продолжать оптимизировать JS.

                                                                  И через пару покалений. Будет не важно вообще SVG или Canvas. Будет выбираться то что удобно или больше подходит.
                                                                    +1
                                                                    А можно SVG отрисовать в растр?
                                                                      0
                                                                      Нет. А зачем?
                                                                        +1
                                                                        Потому что буферизация — самый простой способ оптимизации. SVG — хочешь, не хочешь, а приходится работать с кучей тормозного DOM. А в Канве — можно мелкие картинки, или даже математику, отрисовывать в растр и уже оттуда рисовать на Холст, за счет чего многократно увеличивается производительность. Что я проверил на двух карточных играх. Та, что с кешем — намного более производительная, чем та, что без кеша.
                                                                          0
                                                                          Это, между прочим, один из популярных способов ускорения flash-приложений.
                                                                            0
                                                                            Не уверен, но при аппаратном ускорении это проблема не стоит так остро.

                                                                            Ну а DOM тормозной — JS движки оптимизируют.

                                                                            В конце концов — под каждую задачу своё решение. И отказываться от SVG не стоит.
                                                  0
                                                  Это ведь просто пример. Хорошая плавная анимация на SVG.

                                                  Остальное в наших руках.
                                              +1
                                              SVG предназначен для анимации, почему нет-то? Не меньше, чем Canvas.
                                                –1
                                                Не надо сравнивать яблоки и апельсины. Сравните задачи и решения. Какую задачу решает библиотека А? Если уже есть библиотека Б, которая решает ту же задачу, то как А решает её лучше?

                                                Не надо опускаться до «обсирания» чужой работы. Люди, реализующие SVG тэг <animate> в браузерах, не заслуживают этого.

                                                И ещё, когда спорите о скорости, не забывайте, что IE6 всё ещё живее всех живых. ;)
                                                  +1
                                                  О, как всё обернулось. Обратите внимание, кто упомнил SVG в топике о Canvas. Но, естественно, во всём виновата другая сторона.
                                                  А замечания с вашей стороны делать мне прямо как-то некрасиво. Даже если не брать во внимание лично вас.
                                                  Почему то вы (не Вы лично) не понимаете главной проблемы. А проблема в том, что почитайте топики про SVG. Возьмите любой и найдите там коммент про «Вы — неправы идеологически, т.к. SVG — плохо подходит под данную задачу, используйте Canvas». Вы же не будете утверждать, что SVG — это универсальный молот и им можно забивать все, что угодно, а труд создателей Canvas — не нужен?
                                                  Но возьмите топики про Canvas и что мы видим? «SVG!», «Почему не SVG? Надо было SVG!», «Автор — лох, SVG — рулит.», «Автор не шарит в теме, потому-что есть SVG!» и т.д. И авторы этих комментов не хотят ни на секунду задуматся, что их коммент совершенно не нужен, т.к. топик про Canvas. И почти никто на продакшине не будет использовать ни SVG ни Canvas для создания кнопки и индикатора, а попросят дизайнера по-быстряку накидать фиговинку в шопе и переконвертировать в гифку.

                                                  А может мне название «SVG» не нравится? Или я изучил SVG доскально и теперь хочу изучить ещё и Canvas? Или я хочу, чтобы никто не смог портировать моё приложение на неправославный браузер. Или есть другая, объективная причина. В конце концов, я сидел три месяца, с удовольтсвием ковырялся в низкоуровневой отрисовке графики на Javascript, потом написал либу, которая делает очень лёгкой работу с Canvas, вложил в неё свой небольшой опыт, труд и кровь и делюсь с людьми, которым тоже интересно ковырятся с низкоуровневым кодом, но, возможно, на базе моей библиотеки. И судя по плюсам за топик — людям таки нравится это и они рады.

                                                  Но должен зайти какой-то умник и сказать: «Нахрен надо, есть SVG!». И SVG нахрен надо, можно отрисовывать графики на сервере, добавлять dom-элементы для интерактивности и быть уверенным, что в IE, который живее всех живых всё нормально отрисовывается и ни один пользователь не будет матерится, что мы ему повесили браузер.

                                                  Ну и стоит не забывать, что SVG таки тормоз, что иногда критично (таки, нормальной игрушки на SVG никто пока не сделал).

                                                  Задолбали просто. Обратите внимание, что автор топика — не я. Но делать каждому, кто хочет добавить обёртку над канвасом замечания — это уже просто некрасиво и неоригинально.

                                                  Это я и объяснил выше.
                                                    0
                                                    Я понимаю, что вас задолбали, но это не повод отвечать столь агрессивно на довольно-таки невинные вопросы:
                                                    «Вот только SVG в десять раз тормознее, чем Canvas»
                                                    «SVG — тормозилово.»
                                                    «Демонстрация убогости платформы.»

                                                    (Не нужно так полагаться на тест Камерона. Можно создать тест при котором SVG и Canvas покажут противоположные результаты.)

                                                    и отдельное спасибо за
                                                    «Но лично у меня (Raphaël) ассоциируется только с зависшим браузером.»
                                                      0
                                                      «Вот только SVG в десять раз тормознее, чем Canvas»

                                                      Подтверждается графиком.

                                                      «Демонстрация убогости платформы.»

                                                      SVG хороша во многих вещах. У неё есть куча преимуществ и мест, где её можно использовать. Но показывать тот ужас, который по ссылке в качестве демонстрации возможностей — в ущерб этой технологии. Ну нельзя на ней сделать нормальную игрушку. Даже если можно, то где? Где они? На Канвасе хоть попытки есть какие-то.

                                                      Я с удовольствием не буду больше негативно отзываться о SVG. Действительно, это отличная технология, которая пока завоевала больше рынка, чем сабж. Но только после того, как про неё перестануть писать как про альтернативу Canvas и библиотекам.

                                                      Потому что комментаторы своей навязчивостью и неуместностью просто отторгают от неё.

                                                      «Ничего не портит музыку так, как её фанаты»
                                                        0
                                                        Вот только SVG в десять раз тормознее, чем Canvas на определённых задачах. А на других задачах всё с точностью до наоборот. Давайте действительно, без фанатизма.
                                          0
                                          Что-то мне подсказывает, что это велосипедо-строение.
                                          А как же замечательный Processing.js? Он, конечно, пообъемнее, но очень функционален, думаю, в развитии вполне можете к тому же самому прийти.
                                            +4
                                            1. Смотрели ли вы на другие либы, в частности ImpactJS, MooTools Canvas Lib, LibCanvas? Чем не понравились?
                                            2. Почему не оттолкнулись от какого-либо фреймворка? Тот же MooTools?
                                            3. У вас есть репозиторий, скажем, на GitHub и сборщик как Packager или вы всё так и разрабатываете в одном файле?
                                              0
                                              1. Конечно же, я смотрел библиотеки для работы с canvas. Обычно мне не нравились интерфейсы — в jCanvaScript я старался делать все так, чтобы ее использование было простым и понятным.

                                              2. Мне казалось не очень правильным писать библиотеку, привязанную к какому-либо фреймворку.

                                              3. Репозитория на GitHub нет, но будет.
                                              +1
                                              пишите на support@jcscript.com.
                                              А может лучше все это на Github?
                                                0
                                                Да, будет на GitHub
                                                  +1
                                                  Отлично. Ждите форка. Ибо сейчас сам подобную штуку на работе делаю.
                                                    0
                                                    Ждем не дождемся. За обновлениями же нужно как-то следить! Ибо на jcscript.com даже rss нет. Хотя бы твиттер для проекта заведите. Стану первым фолловером :)
                                                  0
                                                  Я сам задумывался о такой библиотеке. Полностью согласен с тем, что нативный синтаксис Canvas прост и понятен, но неудобен и громоздок. Если нужно нарисовать «палка, палка, огуречик» проблем нет, но в больших картинках код растёт, как снежный ком.

                                                  Когда я обдумывал ТЗ к такой библиотеке, одна из идей была — эмуляция обводок inside/outside у фигур и режим snap-to-pixel. Не секрет, что если нарисовать 1-пиксельную линию по целым координатам, она расплывётся.

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

                                                  Немного разгребусь с делами, посмотрю либу и ещё накидаю мыслей.

                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                  Самое читаемое