CSS3 против холста для поворота текста

Question

У меня есть идея для простой технической демонстрации. Он будет иметь хорошее количество, может быть до 100, различных текстовых меток с различными поворотами и Z-порядками. Кроме того, будет постоянная анимация, поэтому размер, вращение и положение меток будут меняться.

Это можно сделать с помощью CSS3 или Canvas, насколько я могу судить. Подход CSS3 должен быть более доступным, но есть ли другие реальные различия, которые следует учитывать?

Редактировать: мне также нужно уметь довольно точно размещать метки относительно их центральной точки.

Answer 1

Либо должно быть в порядке. Я бы начал с создания CSS3, а затем сделал бы Canvas, только если он как-то не удовлетворен. Некоторые соображения:

• На сегодняшний день текст в DOM выглядит намного лучше, чем текст на Canvas для многих браузеров. Некоторые браузеры не выполняют субпиксельный рендеринг текста Canvas (в то время как другие это делают), что делает его чем-то, написанным одним и тем же шрифтом в DOM и на холсте, выглядит очень по-разному. Для визуальной согласованности CSS3 лучше сейчас.
• Спросите себя, что вы могли бы сделать с этим позже, если что-нибудь. Включите это очень интерактивно? Увеличить количество объектов выше 10000? Тогда вы захотите сделать Canvas, короче говоря, 10 000 объектов DOM - это «плохая вещь».
• Я не уверен, какой из них будет быстрее всего с 100 текстовыми метками. Это не должно быть трудно написать быстрый тест на ваших целевых платформах, чтобы увидеть.
• CSS, вероятно, будет гораздо быстрее сделать.
• Текстовые градиенты Canvas не работают на всех мобильных устройствах, которые я проверял в последний раз
• Поворот текста на холсте + масштабирование, используемое, чтобы выглядеть ужасно в Chrome и Opera. В Chrome это исправлено с 12 версии, Opera все еще выглядит ужасно. Вы можете проверить свои целевые браузеры здесь: http://simonsarris.com/misc/scaleText.html Opera выглядит как this .

Answer 2

в то время как css3 было бы самым хорошим решением, вы должны хотя бы рассмотреть svg.
посмотрите живой пример: http://jsfiddle.net/gion_13/DhqEN/show/
ps: большой минус для canvas, потому что у него нет выделения текста