HTML 5 Canvas против Div для панели прокрутки

Question

Я делаю телепрограмму. См. http://i.tv/guide для примера реализации с использованием Canvas.

Мне нужно сделать много маленьких коробочек, представляющих каждое шоу. Мне нужно иметь возможность прокручивать их как по вертикали (каналы), так и по горизонтали (время). Чтобы сделать это с помощью Canvas, я понимаю, что единственный способ реализовать прокрутку - перехватывать правильные события и плавно перерисовывать холст с новыми смещениями много раз в секунду.

Если бы я использовал div, я мог бы шлепнуть по ним полосы прокрутки и позволить ему нормально прокручиваться. Я мог бы расположить их один раз и позволить прокрутке перемещать их, а не пересчитывать их новые смещения.

Что мне выбрать для такого проекта? Если я буду использовать div, будет ли это слишком медленно? Некоторые очереди имеют 500 каналов. Я хочу отображать до 4 часов одновременно.

Спасибо!

Answer 1

Я бы настоятельно рекомендовал использовать обычный HTML вместо холста для интерактивных элементов. Помимо проблемы со скоростью (div обычно быстрее, чем рисовать все вручную), HTML разработан так, чтобы предлагать функции доступности и юзабилити бесплатно, что вам придется проделать большую работу, чтобы частично получить даже холст. .

Руководство на основе холста в виде ссылки имеет следующие недостатки:

• очень медленно для рендеринга / прокрутки, для меня;
• непроницаем для клавиатуры;
• никаких действий с HTML-ссылками (например, щелчок средней кнопкой мыши по ссылке для открытия в новой вкладке или щелчок правой кнопкой мыши по закладке);
• текст не копируется / вставляется;
• полная потеря для инструментов доступности, таких как программы чтения с экрана;
• уменьшена совместимость браузера;
• невидим для поисковых систем.

Используйте canvas для довольно графических и интерактивных эффектов, которых невозможно достичь с помощью простого HTML. Честно говоря, я даже не вижу ничего подобного на сайте i.tv; Я понятия не имею, почему они реализовали это таким сумасшедшим образом.

Answer 2

У DIV нет проблем со скоростью.Браузерные движки рендеринга созданы для рендеринга элементов.DOM-рендеринг быстрее, чем Canvas-рендеринг, во многих случаях, например, isogenicengine , они используют DOM-рендеринг для рендеринга тысяч элементов в играх. Вы должны реализовать это на основе своих технических возможностей.Обе технологии смогут делать то, что вы хотите.Лично я бы выбрал canvas, но не вижу проблем с рендерингом DOM.

Удачи.