Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 37
Очень интересный проект, интересуют следующие вопросы:
1) В чем принципиальное отличие от SVG? SVG по сути все то же самое, но без канвы.
2) В комментариях к коду написано, что на десктопах вы всегда принимаете devicePixelRatio за единицу из-за того, что на него влияет зум страницы и появляются артефакты. О каких артефактах идет речь? Мне видится два варианта — либо проблема в том, что значение devicePixelRatio может отличаться для двух канв, если пользователь поменял зум между их созданиями. Тогда нужно закешировать значение при создании страницы. Либо артефакты от того, что значение devicePixelRatio при зуме получается дробным. Но тогда я не вижу причин таким же артефактам не появляться на мобильных устройствах. Может просто округлять devicePixelRatio до целого в меньшую сторону? Также мне кажется полезным задать максимальный devicePixelRatio, не отменяющий автодетект. На моем телефоне например это значение равно четырем. Рисовать на канве в таком разрешении я считаю безумием.
3) У вас есть поиск элементов «по имени» с точкой, как это сделано в CSS с классами. Но беда в том, что в HTML атрибут называется class, а не name, а name является эквивалентом id (содержит одно значение, не разделенное пробелами). Почему вы не назвали атрибут class?
1) В чем принципиальное отличие от SVG? SVG по сути все то же самое, но без канвы.
2) В комментариях к коду написано, что на десктопах вы всегда принимаете devicePixelRatio за единицу из-за того, что на него влияет зум страницы и появляются артефакты. О каких артефактах идет речь? Мне видится два варианта — либо проблема в том, что значение devicePixelRatio может отличаться для двух канв, если пользователь поменял зум между их созданиями. Тогда нужно закешировать значение при создании страницы. Либо артефакты от того, что значение devicePixelRatio при зуме получается дробным. Но тогда я не вижу причин таким же артефактам не появляться на мобильных устройствах. Может просто округлять devicePixelRatio до целого в меньшую сторону? Также мне кажется полезным задать максимальный devicePixelRatio, не отменяющий автодетект. На моем телефоне например это значение равно четырем. Рисовать на канве в таком разрешении я считаю безумием.
3) У вас есть поиск элементов «по имени» с точкой, как это сделано в CSS с классами. Но беда в том, что в HTML атрибут называется class, а не name, а name является эквивалентом id (содержит одно значение, не разделенное пробелами). Почему вы не назвали атрибут class?
1. Принципиальное отличие в том, что это canvas. Что лучше canvas или svg это отдельная тема и зависит от сферы применения. Можно поискать «canvas vs svg».
2. К сожалению не могу прокомментировать применение devicePixelRatio для десктоп устройств. Данная часть кода написанна не мной, а самостоятельно протестировать я не могу за не имением подходящего десктоп устройства. Я тестировал только на мобильном устройстве с retina. Спасибо за предложение по поводу ограничения максимального значения ratio. У вас на устройстве devicePixelRatio = 4, а чему равно «backingStoreRatio»? Так как увеличивается разрешение в (devicePixelRatio/backingStoreRatio) раз. Применение высокое разрешение опять же зависит от конкретного приложения.
3. Так получилось исторически. Сначала у объекта мог быть уникальный id и не уникальное имя (name). Потом пришел pull request по поводу того, что имен у одного объекта могло бы быть несколько (т.е. name это одна строка где имена разделены пробелом). Потом я добавил методы «addName», «removeName», «hasName». В результате получился некоторый аналог classList DOM узла. В комментарии написал «аналогия с css классами», так как интерфейс действительно получился очень похожий, но name не имеет никакого отношения к стилям в отличии от css class.
2. К сожалению не могу прокомментировать применение devicePixelRatio для десктоп устройств. Данная часть кода написанна не мной, а самостоятельно протестировать я не могу за не имением подходящего десктоп устройства. Я тестировал только на мобильном устройстве с retina. Спасибо за предложение по поводу ограничения максимального значения ratio. У вас на устройстве devicePixelRatio = 4, а чему равно «backingStoreRatio»? Так как увеличивается разрешение в (devicePixelRatio/backingStoreRatio) раз. Применение высокое разрешение опять же зависит от конкретного приложения.
3. Так получилось исторически. Сначала у объекта мог быть уникальный id и не уникальное имя (name). Потом пришел pull request по поводу того, что имен у одного объекта могло бы быть несколько (т.е. name это одна строка где имена разделены пробелом). Потом я добавил методы «addName», «removeName», «hasName». В результате получился некоторый аналог classList DOM узла. В комментарии написал «аналогия с css классами», так как интерфейс действительно получился очень похожий, но name не имеет никакого отношения к стилям в отличии от css class.
Принципиальное отличие в том, что это canvas.Но вы делаете из канвы полный аналог SVG, убирая это различие. В чем смысл?
а чему равно backingStoreRatio?undefined. Насколько мне известно, этот параметр был выдуман Эпл в Сафари 7 и в 8 оно уже всегда 1 (по крайней мере в десктопе).
Так как увеличивается разрешение в (devicePixelRatio/backingStoreRatio) раз.Ваше логическое разрешение, в котором вы считаете координаты, увеличивается в devicePixelRatio / backingStoreRatio, а физическое разрешение, память выделенная под канву и сложность отрисовки увеличивается в devicePixelRatio * backingStoreRatio.
но name не имеет никакого отношения к стилям в отличии от css class.Аттрибут class тоже не имеет отношение к стилям, это распространенное заблуждение. Атрибут сlass это просто class данного элемента, а никакой не «css class». Просто в css есть средства удобной выборки классов и идентификаторов, но есть и другие способы выбрать элементы. Мне кажется вам нужно переименовать name в class, слишком уже очевидно сходство.
самое страшное, что здесь может произойти — это потеря чёткости изображения при увеличении зумаНо фиксированный dPR равный 1 только значительно усугубляет эту проблему, а не решает ее. На мобильных точно так же можно зазумиться после загрузки страницы. Я не вижу каких-то причин фиксировать это значение только на десктопе. lavrton, давайте отменим это ограничение для десктопа?
число 1.2999999523162841 (живой пример) ничем не хуже целого числа 2 — это же просто математика.На самом деле это не вся правда. Если вы нарисуете картинку в дробных координатах, она будет смазанной. А между двумя соседними картинками появится дыра. Смотреть пример.
Если же округлять координаты перед нанесением, может появиться дыра уже в следствии округления.
dPR отличный от 1 уже предполагает подобное поведение by designТолько дробный же. С целым dPR такого не происходит.
А на мелкой сетке разрыв в 1 пиксель это уже какая-то теоретически-перфекционистская проблемаВообще, полоску контрастных пикселей отлично видно на любой сетке. Но я сейчас проверил на телефоне, мой пример рисуется с округленными координатами и в Хроме и в Фаерфоксе. Сюрприз.
Canvas, как правило, быстрее SVG, и ресурсов кушает меньше, но это от фреймворка всё зависит, а также от прямоты рук использующего.
А физика? Физика?
Может кто-нибудь сделает наконец порт “soldat 2d” в веб?
Возможно ли при помощи этого фреймворка реализовать аналог preserveAspectRatio из SVG? Т.е. могу ли я сделать фуллскрин-приложение с сохранением пропорций?
Как раз хотел какие преимущества в сравнении с KineticJS, и в конце увидел, что это его форк и дальнейшее развитие.
Интересно — как у него с производительностью под мобильные устройствами? Сейчас есть задача — написать простенький по графике матч3 на html5, адекватно работающий под мобилками — никак не пожем найти специалиста, способного показать нормальную работу теста на чем то ниже айфона 5s.
Да, особенно плавность движения фишек, особенно выпадании при совмещении 3+.
Есть ли вообще возможность сделать это плавнее на canvas на мобилках?
Есть ли вообще возможность сделать это плавнее на canvas на мобилках?
Есть очень много советов, как делать надо, и как — не надо.
Например, вы, возможно, рисуете по дробным координатам, или используете setInterval вместо requestAnimationFrame.
А ещё можно очищать не весь холст, а только часть, которая изменяется, а ещё — сохранять уже нарисованное в одну картинку, чтобы не рисовать заново.
Это если вкратце.
Лично я тестил Graphics2d.js на слабом Alcatel 993D (Android 4 с хвостиком на борту), вот эта демка: keyten.github.io/Graphics2D/examples/solarsystem/ шла вполне плавно и спокойно, правда, на нажатия реагировал не очень охотно (возможно, из-за отсутствия touch-событий в демке).
Например, вы, возможно, рисуете по дробным координатам, или используете setInterval вместо requestAnimationFrame.
А ещё можно очищать не весь холст, а только часть, которая изменяется, а ещё — сохранять уже нарисованное в одну картинку, чтобы не рисовать заново.
Это если вкратце.
Лично я тестил Graphics2d.js на слабом Alcatel 993D (Android 4 с хвостиком на борту), вот эта демка: keyten.github.io/Graphics2D/examples/solarsystem/ шла вполне плавно и спокойно, правда, на нажатия реагировал не очень охотно (возможно, из-за отсутствия touch-событий в демке).
Вот чёрт, да вы как-раз на том этапе, на котором был LibCanvas где-то в апреле-октябре 2010-ого)
И, судя по всему, примерно там же и находится в настоящее время?
Кстати, о LibCanvas!
Нет ли где-нибудь склада со ссылками на разные примеры, документацию, tips and tricks? А то читая исходники сложно сходу понять как сделать удобнее/проще/производительнее, а пара статей на хабре покрывают далеко не все аспекты.
Нет ли где-нибудь склада со ссылками на разные примеры, документацию, tips and tricks? А то читая исходники сложно сходу понять как сделать удобнее/проще/производительнее, а пара статей на хабре покрывают далеко не все аспекты.
libcanvas.github.io/ — не то?
Посмотрел API, не нашел низкоуровневой математики(Point, Vector) Невнимательно смотрел? На чем к примеру реализовать collision detection?
Полностью не работает в хроме, просто вижу серый канвас, и ничего не отображается, даже на официальном сайте.
У кого-нибудь есть та же проблема?
У кого-нибудь есть та же проблема?
Заменил KineticJS на Konva, и тут же выплыл баг, которого не было в KineticJS — невозможно перетаскивать объекты правой кнопкой мыши, при отпускании выскакивает браузерное меню.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Konva.js — HTML5 2d canvas framework