Рисуем графику через ж… жаваскрипт

    Информация в принципе общеизвестная, но новичкам (вроде меня) может быть будет полезно.

    Возникла тут недавно потребность рисовать чарты яваскриптом. В итоге была найден элемент canvas от WHATWG и его спецификация. Вещь в высшей степени привлекательная. Позволяет рисовать вот такие штуки:
    штуки
    Делается примерно так:
    <html>
    <head>
    <script type="application/x-javascript">
    function draw() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
    }
    </script>
    </head>
    <body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
    </body>
    </html>

    Пример взят из описания на Mozilla Developer Center.
    Несколько огорчает то, что нативная поддержка этого элемента есть только в Opera 9, Firefox 1.5 и Safari 2. А IE и 6-ой, и 7-ой как обычно впереди планеты всей.
    Ситуацию выручают уже написанные слои эмуляции этого элемента для IE через VML.
    • ExplorerCanvas — реализация слоя от Гугля. Поддерживает практически весь функционал, автоматически расширяет все теги <canvas> документа своими методами. То есть достаточно подключить библиотеку и больше ни о чем особо не беспокоиться.
      MooCanvas — тот же ExplorerCanvas, но в варианте для любителей MooTools. В отличие от предыдущего, не встраивается автоматически в документ, а требует создания элемента через DOM:
      window.onload = function() {
      var c = new Canvas({
      id: 'canvas',
      width: 500,
      height: 500});
      c.inject(document.body);
      }
      IECanvas — свой вариант от Emil Eklund. Поддерживает не все функции и работает медленнее, чем предыдущие.

      Так что в принципе, задача становится вполне реальной.

      Напоследок, несколько любопытных бенчмарков. Делал сам, поэтому возможны какие-то косяки, но тенденция все равно наблюдается (все в миллисекундах):

      Полигон из 300 случайных вершин


      300 треугольников


      200 окружностей радиусом 500 пикселей


      400 картинок 100х100 без прозрачности
      (IECanvas тут нет, потому что он не поддерживает drawImage)


      400 картинок 100х100 с прозрачностью


    Поделиться публикацией

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

      +4
      Полезная информация полезна в любом случае :). Спасибо за обзор.
      • НЛО прилетело и опубликовало эту надпись здесь
          +1
          Half-Life 4 будет на жаваскрипте...
            0
            Ага и движок Source 5 легко можно будет выковырять из исходного кода страницы :)
              0
              А текстуры чего на стены не прикрутили? и немного подтормаживает
                0
                Там есть ссылка на версию с текстурами и другой картой. Но из-за текстур скорость гораздо меньше.
                  0
                  Спасибо
            0
            новый плагин http://code.google.com/p/flot/ для jQuery использует . Клевая штука.
              +1
              Громадное спасибо! Как раз на днях голову ломал.
                0
                а есть способы жаваскриптом нарисовать линию из точки А в точку Б ?
                  0
                  всмысле простые способы? Или это дело у нас в любом случае идет только через "ж..."
                    0
                    Если на канве, то этот элемент такие способы и предоставляет. Методы moveTo, lineTo.
                      0
                      ммм... хочется узнать как оно "ближе к телу" выглядит - мб мне достаточно будет неких базовых возможностей. Если в случае IE - понятно что оно работает через VML. То что происходит в случае с нативной поддержкой? Они просто понимают тэг канвы чтоли? Или там тоже что-то скрытое есть?
                        0
                        Да, тэг canvas, HTMLCanvasElement и его методы в соответствии со спецификацией.
                          0
                          хм. это получается - у флэша появляется конкурент? Или все-же у них различные области взаимодействия?

                          Как я помню... несколько лет назад натыкался на "трехмерный интернет". Кажется он был реализован на VML, хотя я и не уверен. В чем плюсы канвы по сравнению с флешем и VML? По скорости, по идее, оно не должно быть сильно быстрее. Или я ошибаюсь?
                            0
                            Видимо, не VML, а VRML.

                            VRML (Virtual Reality Modeling Language) - текстовый формат описания трехмерных объектов для использования преимущественно в вебе.
                            VML (Vector Markup Language) - говорит сам за себя, векторная графика в XML, майкрософтская разработка, аналог SVG. Используется только в IE и продуктах MS Office.
                            SVG (Scalable Vector Graphics) - по сути то же самое, но одобренное W3C и ожидаемое во всех браузерах.

                            Флеш - это мультимедийная технология, никак не связана с браузерами, XML, стандартами и W3C и поэтому особо с ними не конкурирует.
                              0
                              Если всё-таки попытаться сравнивать канву и флеш: сейчас canvas работает медленнее флеша. Зато на его стороне важные преимущества в открытости, нативности, правда у canvas гораздо меньше возможностей, сегодня даже текст родным api выводить нельзя. Сферы применения, по мне так для чартов и графиков очень подходит. Мы например, используем его для отображения показаний параметров датчиков с буровых.
                                0
                                С каких пор flash стал закрытой технологией?
                                  0
                                  С тех пор как для проигрывания flash-а нужен Adobe Flash Player и только он. И что этот flash разрабатывается одной конторой, и творят они там что хотят. И ещё, насчёт использования спецификации (которую не найти) swf — File Format Specification FAQ.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Флеш все больше набирает обороты. Притом не обязательно ограничиваться адобовскими Flash и Flex средами. да и никто не мешает компилить as код сторонними компиляторами. Не думаю что "закрытость" спецификаций помешала сделать библиотеку для генерации swf из под php и многое другое. А с приходим AIR можно ждать еще больших успехов флеша. Да и адоб начала передачу ряда продуктов опенсорс сообществу, что тоже не может не радовать :)
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          Ну тогда пишем код на as3 и компилим спокойно под 9 флешу. Компилятор какой вот не помню, но он есть и не один.
                                          Это, а разобрать экзешник в исходники любому декомпилеру подсилу?
                                          Поплюсуйте чтоль за упорство.
                                          0
                                          Ну вот когда после установки браузера не нужно будет устанавливать отдельную среду для flash, тогда я похлопаю ему в ладоши.
                                          А пока вам всё-таки придётся согласится с моим аргументом ;-).
                                            0
                                            Браузер какой пользуете? Вместе с системой идет? JAVA не пользуем? А скачать 2 метра сегодня не проблема.
                                            Думаю не стоит принимать в штыки технологию, которая использется, замечу используется а не присутствует на 90% компьютеров.
                                              0
                                              Ну причём здесь скачка, спор ведь совсем о другом! Вы зацепились за слово и спор переводите совсем в другое русло… И я не против флеша (там где он уместен), и не воспринимаю его в штыки.

                                              PS. FF 2, 3b, Opera 9, 9.5b, Safari win, Safari mac, IE6, IE7.
                                                0
                                                Да понятно, может зря я разошелся. Да и я не простив еще одного инструмента реализации. :)
                          0
                          спасибо, подумаю на тему статьи "Практический JS: оптимизируем canvas" :)
                            0
                            спасибо! голова уже сломана другой библиотекой "для рисования", но при случае потестим, сравним.
                              0
                              Странно, что вы ни разу не вспомнили магическую комбинацию букв SVG...
                                0
                                А что SVG? С канвой он связан мало, IE его не поддерживает и вместо него реализовал VML, есть конечно библиотеки абстракции над VML и SVG, но это уже совсем другая история.
                                0
                                Самый крутой пример — polyhedra.org. Не забудьте потискать на клавиши курсора…
                                  +2
                                  IE6 и IE7 действительно «впереди планеты всей» без всякого сарказма. Тег CANVAS стандартом не явлется (по крайней мере пока), так же как и VML, который Microsoft предложил за несколько лет до SVG и CANVAS.

                                  Я не сторонник Microsoft, но интересно почему нестандартный CANVAS — это хорошо, а нестандартный VML — плохо.
                                    0
                                    Сравнивать canvas и VML некорректно. VML - язык разметки, разработка майкрософт, рекомендован только ими самими. Есть аналогичная вещь (SVG), которая рекомендована w3c, поддерживается всеми браузерами, но редмондскими упрямцами по обыкновению проигнорирована.

                                    Canvas - да, нестандартный. И как раз то, что все ведущие браузеры, за исключением одного лишь IE, уже имплементировали нестандартную технологию, как раз и заставляет задуматься о сарказме во фразе «впереди планеты всей».
                                      +1
                                      VML и Canvas сравнивать вполне корректно, они решают схожие проблемы, разве что VML более мощный, так как умеет ещё и 3D (3D CANVAS пока нет, есть экспериментальное решение от «Оперы» в специальном билде, но только и всего). VML так же управляется скриптом, как и CANVAS, только специфика отличается — построение через DOM и прямые команды. Первый способ труднее, но и более гибкий — чтобы стереть полигон в CANVAS его нужно зарисовать, чтобы удалить полигон в VML его нужно просто убрать из DOM.

                                      Вам не кажется, что CANVAS реализовали именно в противовес IE? А про «за исключением IE» это даже не смешно — в IE6 ему появиться неоткуда, он родился раньше CANVAS, IE7 — это скорее IE6.1, патч впопыхах.

                                      Ещё раз повторюсь: я не говорю, что «Microsoft = хорошо». Я говорю, что между нестандартным предложением Microsoft (VML) и нестандартным предложением Apple (CANVAS) нельзя проводить границу «хорошо» и «плохо». Если уж выбирать, то я бы выбрал скорее VML — возможностей у него много больше и делать всякую развлекуху, которая демонстрируется в ссылках со статьи на нём гораздо проще.
                                        0
                                        Повторюсь, VML - язык разметки векторной графики. Как SVG. Разные языки разметки векторной графики есть во всех современных браузерах. Просто в IE он свой сосбтвенный, а FF и Опере - стандарт от W3C.
                                        Canvas - технология отрисовки по канве. То есть растровая. Проблемы они решают настолько же несхожие, насколько несхожи растровая и векторная графика.
                                          –1
                                          Если я в VML наложу растровую картинку на полигон, то VML станет растром? VML умеет всё то же самое, что и CANVAS, плюс много других возможностей. VML это и растр (там есть средства для работы с растром) и вектор. CANVAS — только растр.

                                          Я лишь хочу сказать, что CANVAS и VML — нестандартно и противопоставлять их нельзя, особенно в ключе «в IE есть VML — плохо, в FF, Safari и Opera есть CANVAS — хорошо». С этим-то вы согласны?
                                            +1
                                            Знаете, в Фотошопе тоже есть возможность с вектором. И в Кореле - с растром. От этого не меняется то, что первый - растровый редактор, а второй - векторный.

                                            В IE есть VML. В FF и Опере есть Canvas и SVG. В Safari есть Canvas, насчет SVG не уверен. Следовательно, FF и Опера поддерживают больше технологий.

                                            Canvas и VML как раз противопоставляете вы, а не я. Я противопоставляю наличие canvas и отсутствие canvas. А если с чем-то и противопоставлять VML, то только с SVG.
                                              0
                                              Процитирую то, что я спрашиваю у вас уже в третий раз:

                                              «Я лишь хочу сказать, что CANVAS и VML — нестандартно и противопоставлять их нельзя, особенно в ключе „в IE есть VML — плохо, в FF, Safari и Opera есть CANVAS — хорошо“. С этим-то вы согласны?»
                                                0
                                                Противопоставлять нельзя - согласен (только вы почему-то это делаете). То, что VML хорошо, согласен. То что Canvas хорошо, тоже согласен.

                                                Только вот в IE лишь одно "хорошо", а в FF и Опере "хорошо" два раза.
                                                  +3
                                                  В IE очень много своих хорошо. Большая часть «не-стандартов» IE вдохновила «стандарты» W3C. AJAX, VML (вдохновил SVG), behavior (bind в FireFox), embed fonts (@font-face в CSS2.1) и так далее — можно очень долго перечислять.

                                                  А каких-то вещей в остальных браузерах до сих пор нет, например, HTML binding (это проще и удобнее AJAX), HTA или International CSS (никто лучше IE не поддерживает всякие там китайские и японские языки).
                                                    0
                                                    Тоже верно. А вот с канвасом, видите, пролет - придумала Эппл, а у МС альтернативы нет.

                                                    Хотя почему-то со всеми своими модными нововведениями, они так и не могут сделать самых необходимейших для браузера вещей вроде рендеринга по стандартам. Но это уже обсуждение не для этого топика, здесь я всего лишь сравнил различные имплементации и эмуляции именно растровой графики в браузерах, и именно здесь IE отстает.
                                                      0
                                                      На сим и закончим, думаю. Но, согласитесь, такое количество фич у браузера, которому столько лет (IE7 я не считаю всё-таки) — это достижение.
                                                        0
                                                        Возможно. Но так как эти фичи реализованы не по стандартам и их больше ни у кого нет, ими пользуется очень маленький процент разработчиков.

                                                        Гораздо большим достижением для них была бы нормальная поддержка всех требуемых стандартов.
                                                          0
                                                          CANVAS тоже не реализован по стандартам :) А уж брать фичи у IE, менять их, делать из этого стандарт и сетовать, что в IE этого нет — странная практика :)
                                                            0
                                                            Canvas - это часть грядущего HTML 5.
                                                            И практика вполне нормальная, потому что если бы фичи IE были достаточно продуманы, то они бы и стали стандартом. Раз этого не произошло, надо реализовывать то, что стало стандартом, а не с упрямым видом продолжать проталкивать свою нестандартную технологию, не сумев смириться с поражением.
                                          0
                                          А в качестве ответа VML можно считать именно SVG, но никак не Canvas.

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

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