FAQ по Canvas: задавайте вопросы

    Привет всем! Часто в комментах и в личке возникают вопросы на счёт Javascript Canvas.
    У большинства даже если и есть теоретические знания — банально не хватает опыта.
    У меня этот опыт есть. Потому в этой теме предлагаю задать вопросы по Canvas, на которые я отвечу следующим топиком.
    Если нету реги на Хабре — можете скинуть свои вопросы на shocksilien@gmail.com, я добавлю его в топик.
    Изначально хотел кинуть в q&a, но количество и качество вопросов в комментах к этому топику положительно скажется на качестве следующего топика, так что рассчитываю на вашу поддержку)

    ps. Не стесняйтесь задавать те вопросы, которые вы считаете глупыми. Если они вас интересуют — задайте их.
    pps. Я буду задавать уточняющие вопросы. Например «для каких целей?». Это не значит, что вопрос — неправильный. Это значит, что, зависимо от цели, могут быть разные решения.

    Ответы

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

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

    Комментарии 67
      0
      Интересуют методы улучшения быстродействия (поднятие fps).
        +1
        fps = 1000 / (16.5 - время_перерисовки_кадра - время_вычисления_кадра)
        Как правило время_перерисовки_кадра <<< время_вычисления_кадра. Константа 16.5 зависит от браузера.
        Совет: Начните с оптимизации функции, которая вычисляет кадр.
          0
          Ну, я так понял, вопрос как раз в том, как оптимизировать функцию, которая вычисляет кадр ;)
            0
            Но это, по-моему, имеет большее отношение к алгоритмам и логике, нежели к Canvas'у таковому.
              +1
              Зависит от конкретной ситуации. Чаще стоит проблема оптимизации циклов (проблема общая для любого ЯП — нет смысла тут останавливаться).
                +3
                Та нет, есть ряд советов, которые могут значительно повысить fps.
          +6
          Когда нужно использовать Canvas а когда Flash?
            +1
            Уже спрашивал, но так как в той теме ответа нет — как вывести текст на canvas в IE? Пробовал text.canvas.js с гуглокода — выводит ошибку про отсутствие нечто glyphs. Можно ли без него, или как заставить его работать? Спасибо.
              +1
              IE9, или IE8-. Если IE8-, то как вы заставили там работать Canvas?
                +1
                IE8-… excanvas.js с гуглокода
                  0
                  Вы победили не работающие радиальные градиенты в excanvas?
                    0
                    Нет, мне их не приходилось использовать.
                    0
                    excanvas — это самое тупое что можно было придумать, это все равно что компилировать машинный код в JavaScript, это фактический слой абстракции VML над direct2d, и еще один слой антиабстракции в сторону низкоуровневого API Canvas
                    0
                    Ссылки: excanvas и text.canvas
                  0
                  Как можно сделать скриншот Canvas?
                    +1
                    Для каких целей? Со стороны программиста или со стороны пользователя?
                      0
                      Представим, что на Canvas отрисован какой-то график. Нужно, чтобы пользователь сохранил его.
                        0
                        Чтобы пользователь сохранил его на сервер или на клиент?
                          +4
                          Хотя неважно, расскажу и то и то)
                            0
                            дополню вопрос
                            как сохранить скриншот на другой домен (методом GET)
                            0
                            Без разницы.
                        +2
                        Если «Скриншот канваса === Сохранить канвас как картинку», то:
                        /* раз */ canvas.getAsFile("test.jpg", "image/jpeg"); // File https://developer.mozilla.org/en/DOM/File
                        /* два */ canvas.toDataURL(); // String формата data url
                        
                        /* пример */
                        function test() {
                         var canvas = document.getElementById("canvas");
                         var f = canvas.mozGetAsFile("test.png");
                         
                         var newImg = document.createElement("img");
                         newImg.src = f.toDataURL();
                         document.body.appendChild(newImg);
                        }
                        
                        Почитать

                        Важно Вы должны задать фиксированные размеры канваса (через width/height или style), иначе получете плохие данные из toDataURL
                          +1
                          Ты хочешь сделать безсмысленным второй топик? =))
                            0
                            Ну почему, фильтровать комментарии на предмет ответов не всегда есть время и желание.
                            Так что отдельный топик нужен. :)
                              0
                              1: есть изображение на канвасе. Требуется получить на сервере снапшот (png) какой-то отдельной прямоугольной области изображения.

                              2: есть изображение в одном канвасе. Как его скопировать в другой канвас? (Есть мысль, что первую проблему можно как-то с помощью этого решить).

                              3. Есть канвас, на котором сверху висит див с SVG. Как можно получить объединенное изображение в канвасе? (Есть мысль, что можно просто перенести SVG в канвас, а затем вставить один канвас в другой (вопрос 2), но не знаю, можно ли все єто сделать на клиенте)

                              Интересуют Chrome, FF4; IE9 и Opera по возможности, фолбэк на IE 8 не критичен.
                                0
                                Еще такой вопрос, правда ли, что длинна Url для IE ограничена 2 kb, и верно ли это для IE9?
                                  0
                                  introducinghtml5.com/
                                  Посмотрите примеры по canvas, возможно что-то поможет. Сам я только книгу читал, не проверял.

                                  На сервер в любом случае придётся отправлять данные post запросом.
                            0
                            Ну тогда очень глупый вопрос — где эта технология применяется? В верстке вообще не разбираюсь, это нужно только для онлайновых рисовалок, игрушек, анимации? Или где эта технология находит основное применение?
                              +2
                              Канвас очень хорошо подходит для: высокопроизводительных анимаций, рейтрейсов, фильтров; представления огромного объема данных в реальном времени; 2Д игр. Для всего остального лучше svg.
                              Подробнее Thoughts on when to use Canvas and SVG
                                0
                                Спасибо за ссылку, познавательная статья.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                +1
                                Если вы про захват видео с камеры:
                                API есть только в черновике спецификации Media Capture API ближайший релиз спецификации возможен в PhoneGap — возможно есть в транке. Работать с ним будет очень просто. Вешается обработчик на «устройство», каждый кадр передается в виде картинки в формате data uri:
                                function success(data) {
                                  var container = document.createElement("div");
                                  
                                  for (var i in data) {
                                    var img = document.createElement("img");
                                    img.src = data[i].url;
                                    container.appendChild(img);
                                  }
                                  document.body.appendChild(container);
                                
                                }
                                 
                                function error(err) {
                                  if (err.code === err.CAPTURE_INTERNAL_ERR) {
                                    alert("The capture failed due to an internal error.");
                                  }
                                  else {
                                    alert("Other error occured.");
                                  }
                                }
                                 
                                navigator.device.capture.captureImage(success, error, { limit: 1 });
                                +1
                                Получить базовые знания я могу просто погуглив, но меня пока останавливало ощущение эдакой концептуальности технологии, типа такая штука на вырост. Если в статье будет описание что это вообще такое, какова поддержка браузерами, какова основная область применения, насколько развиты фреймворки и вообще что-то, чтобы заставило меня заинтересоваться канвасом — мне было бы очень интересно почитать.
                                С другой стороны выше спрашивают про fps, а для меня это пока как из космоса вопрос.
                                  0
                                  Отличия преимущества недостакти в сравнении с «SVG W3C Recommendation and VML»?
                                  *или свг поверх канваса пишется? не совсем в теме в деталях*

                                  Во всех ли браузерах все отрисованное отображается одинаково и как бороться если нет?
                                    0
                                    SVG — это xml. Т.е. можно работать с нодами через SVG-специфичные DOM функции.
                                    Canvas — это bitmap с низкоуровневым api.
                                    0
                                    Каково самое эффективное решение на данный момент для попиксельного доступа при отрисовке произвольного изображения на Canvas (без WebGL)? Например, ручная прорисовка граней при построении 3D с использованием закраски по Гуро/Фонгу.
                                      +3
                                      Есть ли пути эффективно и кросплатформенно смасштабировать канву со всеми внутренностями под размеры экрана?

                                      context.scale(x,y) перед отрисовкой не работает на iphone 3g (возможно и в других мобильных браузерах, проверять не стал). Если масштабировать каждый элемент при отрисовке — здорово проседает FPS.
                                        +1
                                        style.WebkitTransform = «scale(...)»; должен хорошо работать на iPhone по идее.
                                        0
                                        Только-только полез копировать комментарий.
                                        И вдогонку: поддержка и быстродействие на Android/iOS устройствах
                                          +1
                                            0
                                            Простите, топик с вашим вопросом удалён. Не могли бы вы повторить?
                                              0
                                              Техническая реализация drawImage по сравнению с putImageData и вытекающие отсюда возможности по оптимизации (можно ли допускать множественные перекрывающиеся drawImage либо нужно складировать все изменения в один массив и потом только отправлять в canvas)
                                              Возможности двойной буфферизации и работы со скрытым canvas
                                              Поддержка на Android-устройствах
                                                0
                                                Спасибо.
                                            0
                                            Интересует самый быстрый способ нарисовать точку (например, для графика). Однопиксельную и четырёхпиксельную, произвольного цвета.
                                              0
                                              var ctx = document.getElementById('mycanvas').getContext('2d');
                                              ctx.fillstyle = 'red' // #FF0000
                                              ctx.beginPath();
                                              ctx.arc( x, y, radius, 0, Math.PI * 2, true );
                                              ctx.fill();
                                              ctx.closePath();
                                                0
                                                Медленно. Через fillRect будет быстрее, хотя и не так красиво. А если точек много, то быстрее будет вручную через get/put image data
                                              +1
                                              В каком виде хранится, отображается и перерисовывается «мир» в играх с видом сбоку (как playbiolab.com), т.е. игрок побежал вправо камера подвинулась вместе с ним и мир «подвинулся».
                                                0
                                                Знаете, а я даже как-то и не задумывался над идеей хранить мир в отдельном полноразмерном canvas'е и перемещать его чем-нибудь вроде css. Спасибо за мысль, хотя ее область применения достаточно узка
                                                +4
                                                Мне было бы очень интересно послушать про типовые реализации основного функционала canvas-библиотек, таких как: эмуляция слоев, определение активного элемента (на котором в данный момент находится курсор), создание системы управления событиями и т. д.
                                                  0
                                                  Возможна ли реализация трехмерного игрового мира на канвас и елси да, то как?
                                                    0
                                                    Что вы имеете ввиду?

                                                    ps. habrahabr.ru/blogs/canvas/117772/
                                                      0
                                                      Да именно это. Спасибо большое. А какие еще есть 3d-фреймворки?
                                                        0
                                                        Больше не помню.
                                                    0
                                                    Существуют ли какие-то секретные библиотеки (я искал, но не нашел), умеющие рисовать:
                                                    1. Линии переменной толщины. В случае с прямыми это относительно несложно реализовать «костыльным» способом, а вот всякие кривые Безье — видимо, только на низком пиксельном уровне.
                                                    2. Градиентную раскраску линий. Ну то есть чтобы цвет плавно менялся между узлами вдоль линии, не обязательно прямой. Такая функция есть, например, в OpenGL.
                                                      0
                                                      какую литературу почитать?
                                                        0
                                                        разве это не FAQ? Что, сложно что-то посоветовать?
                                                          0
                                                          Второй топик делается.
                                                        0
                                                        Как можно получить цвет определенного пикселя на канвасе?
                                                        0
                                                        имеем кучу обведённых(незаполненных) объектов на холсте. есть ли дешёвый и сердитый способ заполнить кликнутый объект? кроме как хранить координаты всех и перерисовывать его.
                                                          0
                                                          Уточните, пожалуйста. Вы хотите сделать аналог заливки графических редакторов, или изменение вида объекта зависимо от движения мыши.
                                                            0
                                                            и это имеет значение? ведь заливка тоже изменение формы или нет? но в данном случае «аналог заливки графических редакторов», спасибо.
                                                          0
                                                          Насколько различается поддержка в браузерах или все следуют стандарту?
                                                            0
                                                            Я тоже хочу в этот топик что-нибудь написать ))
                                                            Кто-нибудь рисовал диаграмму Вороного? Хотелось бы глянуть на пример реализации
                                                              0
                                                              Вспомнил вопрос, который меня давно мучает.

                                                              Линии рисуются при помощи функций moveTo(x0, y0) и lineTo(x, y). То есть сначала перемещаем виртуальный курсор в стартовую позицию, а потом чертим отрезок.
                                                              А можно ли программно узнать текущие координаты курсора? Ну, например, чтобы сохранить их, изменить, а потом восстановить. Казалось бы, очень простая и естественная вещь — но ответа я не нашел.
                                                                0
                                                                Я не знаю про такое. Могу добавить такую возможность в LibCanvas.
                                                                  0
                                                                  Ну добавить было бы неплохо в любом случае.
                                                                  Но это же всё равно будет надстройкой, и будет работать только если рисование идёт через ту же библиотеку.

                                                                  Вообще я очень удивлен, что в API нет такой простой и естественной вещи. Даже долгое время думал, что это я что-то недопонимаю или плохо искал.

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

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