stannislav Feb 15 2011 at 09:59

Отрисовка интерфейса через Canvas

3 min

3.2K

Lumber room

From sandbox

Comments 6

homm Feb 15 2011 at 11:58

А что значат цифры перед таблицами в примерах? Первая отрисовка, вторая изменение?
У меня например, такой результат для Оперы и Хрома:
habrastorage.org/storage/3131c6a6/dee502b0/2394a971/d79ddc2a.png
Как я понимаю, здесь нет такого различия в результатах, как получилось у вас?

stannislav Feb 15 2011 at 17:04

Первая — время на изменение одной ячейки, второе — время на полную прорисовку
Судя по вашему скриншоту — это Mac — там может быть другая ситуация с оптимизациями

homm Feb 15 2011 at 12:05

Немаловажно, что из html-таблицы можно скопировать текст, а из canvas нет.

stannislav Feb 15 2011 at 17:10

Да, это конечно ограничивает использование.
Но если ожидается что данные будут активно копи-паститься, часто (в нашей практике) делается дополнительная обертка для копирования (чтобы данные копировались в клипбоард в excel-friendly формате) — её можно прикрутить как к html так и к canvas.

Nevkontakte Feb 15 2011 at 17:41

Firefox 3.6, Linux, Core2 Duo, E8400 (3 GHz) (тест/результаты html/результаты canvas)
Wide table / 0.439s,0.67s / 0.019s,8.148s
Long table / 0.01s,0.635s / 0.416s,7.965s
Long colored table / 0.479s,1.115s / 0.01s,8.281s
Результаты воспроизводимы с хорошей точностью.

Так что с отрисовкой больших таблиц по крайней мере Fx справляется, вот только с раскрашенной версией дает очень странный результат.

pepelsbey Feb 17 2011 at 00:28

браузер пытается сгладить все линии, и приходится использовать не самый стандартный подход — в частности, вся табличка, нарисована заливками (fill) а не линиями

Почитайтте про особенности отрисовки пикселов в Canvas, может быть в этом ваша проблема

Show the best of all time