Комментарии 10
Оффтоп/батхёрт
Делаю на досуге одну штуку с построением графов и т.п. Сначала делал на HTML5 Canvas, потом впёрся в кучку ограничений и не высокую скорость работы и переписал всё на SVG. Второй оказался лучше для решения моей задачи по всем параметрам.
В канвасе есть ограничение на максимальный размер холста. Причём это ограничение в разных браузерах и на разных платформах сильно отличается. При достижении максимального размера по одной из осей вообще ничего не отрисовывалось. При этом сама картинка с холстом около 3000x15000 px рендерилась ощутимо медленно, при перемотке страницы тормозила и иногда даже роняла браузер… Для того, чтобы нарисовать прямоугольник со скруглёнными углами надо прибегнуть к особого рода извращениям. Нельзя повесить :hover на элемент… Хотя квадратичную кривую Безье рисовать на канвасе, как мне показалось, проще, чем на SVG.
В канвасе есть ограничение на максимальный размер холста. Причём это ограничение в разных браузерах и на разных платформах сильно отличается. При достижении максимального размера по одной из осей вообще ничего не отрисовывалось. При этом сама картинка с холстом около 3000x15000 px рендерилась ощутимо медленно, при перемотке страницы тормозила и иногда даже роняла браузер… Для того, чтобы нарисовать прямоугольник со скруглёнными углами надо прибегнуть к особого рода извращениям. Нельзя повесить :hover на элемент… Хотя квадратичную кривую Безье рисовать на канвасе, как мне показалось, проще, чем на SVG.
НЛО прилетело и опубликовало эту надпись здесь
Вот поэтому для решения именно моей задачи SVG подошёл значительно лучше, чем Canvas. Если честно, то я вообще не могу представить себе задачу для которой Canvas подходил бы лучше, чем SVG. Я понимаю, что это совсем разные вещи, но всё же :)
НЛО прилетело и опубликовало эту надпись здесь
Я думаю, если в этой игре не нужен гигантский холст, то канвас будет вести себя хорошо, но если вам нужен холст 10Кх10К, то канвас будет ронять браузер.
Но это сугубо моё личное мнение, которое строится из моего личного опыта работы с канвасом и svg.
Да и в общем-то все то что можно делать на канвасе можно делать и на SVG. Опять таки личное мнение :)
Вот, кстати, как в канвасе сделать движение шарика?))) Я почему-уверен, что на svg это сделать проще :)
Но это сугубо моё личное мнение, которое строится из моего личного опыта работы с канвасом и svg.
Да и в общем-то все то что можно делать на канвасе можно делать и на SVG. Опять таки личное мнение :)
Вот, кстати, как в канвасе сделать движение шарика?))) Я почему-уверен, что на svg это сделать проще :)
может стоило выводить на канву только то, что попадает во вьюпорт?!
Не получалось так :)
Я изначально выбрал неправильный инструмент для решения задачи, поэтому и столкнулся с подобными трудностями.
И отвечая сразу на вопрос bulletproofcupid, нужно было отрисовать турнирную сетку Double Elimination на 128+ игроков.
К сожалению, понял, что выбрал не тот инструмент после того как уже проделал большую часть работы. Ладно хоть никаких дедлайнов не было, решал задачу ради удовольствия :)
Я изначально выбрал неправильный инструмент для решения задачи, поэтому и столкнулся с подобными трудностями.
И отвечая сразу на вопрос bulletproofcupid, нужно было отрисовать турнирную сетку Double Elimination на 128+ игроков.
К сожалению, понял, что выбрал не тот инструмент после того как уже проделал большую часть работы. Ладно хоть никаких дедлайнов не было, решал задачу ради удовольствия :)
картинка с холстом около 3000x15000 px рендерилась ощутимо медленно
Разрешите поинтересоваться, для каких целей потребовалось рендерить такое огромное изображение?
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Кривые Безье-де Кастельжо. Canvas HTML5