Рисование в JavaScript с div

Question

В своем стремлении изучить javascript (который, похоже, является моим последним источником вопросов для SO в настоящее время) я нашел этот API для рисования http://www.c -point.com / javascript_vector_draw.htm

Тем временем я проводил некоторые эксперименты с графикой, которые, как правило, сильно влияют на количество материала для рисования. Этот парень рисует с помощью div, каждая квадратная часть изображения - это div. Вы можете легко проверить это, проверив его пример на странице.

Он делает деление 1px / 1px, чтобы нарисовать пиксель

Теперь я должен спросить следующее:

Это лучший метод? Это кажется довольно тяжелым, когда рисунок более сложный. Какие еще методы вы бы предложили?

Эта библиотека для рисования Javascript? уже имеет пару ссылок на библиотеки, поэтому нет необходимости размещать их здесь.

Я видел здесь в ТАКИХ других вопросах, касающихся рисования. Мне просто интересно, в какой момент рисование с помощью div'ов не ужасно!

Answer 1

для векторного рисования, библиотеки типа Raphael обеспечивают согласованный API поверх SVG и VML.

для растрового рисования, вы можете использовать для браузеров, поддерживающих холст.

для IE, вы по умолчанию используете DIVS, или ваш API рисования использует silverlight, если он доступен. Обратите внимание, что для эффективности, div не должен быть 1px на 1px, а должен быть настолько длинным, насколько это необходимо для фигуры, которую вы рисуете. 20 1-пиксельных делителей одного цвета должны быть 1 делением шириной 20 пикселей. Обычно вы не будете очень интерактивны с подходом div, потому что браузер, на который вы нацелены (IE), имеет медленный доступ к DOM

РЕДАКТИРОВАТЬ: Связанная библиотека выполняет оптимизацию div.

для решений только для HTML (без SVG / VML / canvas) вы используете css и настраиваемую ширину границы:

Answer 2

Перед тем, как начать работу с 1px divs, посмотрите dojox.gfx: docs , tests , demos (две последние ссылки на ночной снимок тестовый сервер, оптимизированный для отладки, а не для производства).

Используется встроенная графика: SVG, VML, Silverlight или Canvas & mdash; все, что доступно на клиенте, охватывает все основные браузеры (IE, Firefox, Safari / Webkit, Opera).

Answer 3

Нет, это худший метод, разработанный до того, как появились элементы SVG или canvas ... Это было бы очень тяжело для памяти и очень медленно. Забавный, интересный взлом, но не очень полезный в реальном мире.

Помимо библиотек, упомянутых в другом потоке, опираясь на canvas / SVG / VML, я видел игры, созданные со спрайтами, т.е. некоторые изображения расположены абсолютно. Был также удивительный хак, который кодировал 3D-игру от первого лица на 5k JavaScript , используя генерацию изображений XBM на лету. Но поддержка этого формата изображения была удалена из последних версий Windows ...: - (

Если подумать, вы также можете создавать изображения, используя протокол "data: image / png; base64", но кодирование будет довольно медленным, и браузеры IE будут недоступны.