Почему использование <холст> вместо простого JavaScript? [закрытый]
Некоторые демонстрации холста HTML5 являются очень впечатляющими, но я немного смущен. Что может сделать элемент холста, тот регулярный старый JS/jQuery и CSS3/HTML5 не могут? Есть ли выигрыши в производительности?
4 ответа
Canvas требует JavaScript, чтобы сделать что-либо, так что это не совсем или-или с "простым старым JavaScript" См. простой пример здесь:
<canvas id='myCanvas' height='200' width='200'><canvas>
Затем вы используете JS код, чтобы рисовать на нем:
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect (10, 10, 50, 50);
}
До этого в дни до-канвасного JS вы были бы вынуждены при рисовании на экране использовать заполненный div для создания фигур. Простой прямоугольник или квадрат - это просто, но для рисования диагональной линии потребовалось бы множество однопиксельных div'ов, а круг - еще хуже. Существуют библиотеки, которые делают это, например библиотека Уолтера Зорна, довольно старая и хорошо известная. Если только вы не поддерживаете какой-нибудь древний браузер, такой путь не кажется разумным.
Как люди ссылаются, вы можете запустить в большинстве браузеров, кроме Internet Explorer, для которого вам нужна библиотека перевода, например Explorer Canvas Это переведет код canvas в родной VML IE. Однако, это несколько проблематично при любой сложности, особенно если вы полагаетесь на медленную реализацию JS в IE для выполнения перевода.
Другими альтернативами векторной графики являются ненавистный в настоящее время (вздох) Flash, VML, непосредственно закодированный в IE, и SVG, если браузер его поддерживает. Ходят слухи, что в IE9 появится SVG, что является интересным событием.
Что любопытно в этом зубоскальстве по поводу Canvas в сравнении с другими вещами (в последнее время, конечно, Flash), так это отсутствие реального обсуждения проблем его практического применения. Canvas - действительно классная технология, но у нее есть три существенные проблемы/задачи (не обязательно по порядку)
Ее поддержка текста - очень совсем новая, поэтому доставка шрифта на работает только в последних версиях (в других случаях вам нужны наложения HTML/CSS) или же с помощью мерзких хаков для рисовать формы букв на холст.
Интерактивность - это хак и половина. Если вы хотите сделать рисунок на холсте кликабельным, вы вынуждены использовать наложенные карты изображений, или теги div, или делать какие-то безумные уловки карты пикселей события и выяснять, какие пиксели они попадают. Изображение на холсте - это отрисованная битовая карта и на самом деле не не предназначено для того, чтобы с ним взаимодействовали, как люди хотят. Google на прошлогодней конференции I/O немного потанцевала вокруг этого вопроса: http://www.youtube.com/watch?v=AusOPz8Ww80#t=48m54s&feature=player_embedded API немедленного режима означает отсутствие "ковыряние" - "canvas не будет развивать эту способности" Их упоминание о том, что SVG лучше, пропускает производительность и проблемы совместимости с этой технологии, короче говоря, признание и решение без ответа.
Нет встроенной поддержки IE. Извините эта библиотека перевода не снижает производительность ни на что существенное и очевидно, что IE все еще является браузером нравится вам это или нет.
Однако, если вам нужно выбрать технологию рисования, не основанную на плагинах, canvas даже с библиотекой совместимости IE явно лучше, чем старые заполненные div, если только у вас нет необходимости в поддержке древних браузеров.
- это поверхность для рисования , поэтому она полезна, когда вы хотите рисовать свои собственные формы и тому подобное.
Таким образом, это не строго «вместо» JavaScript - вы используете JavaScript для рисования материала в теге . На самом деле вы не можете рисовать на HTML-странице с помощью JavaScript, вместо этого вы можете манипулировать элементами DOM - но это обычно более полезно, чем рисование, как видно из вашего вопроса.
Лично я не могу придумать ничего хуже, чем написать кучу кода для рисования, скажем, круга на веб-странице (я бы предпочел использовать программное обеспечение с графическим интерфейсом для создания файла изображения), но я ' Представляю, для игр и графиков такой уровень контроля полезен. (Вы можете вытащить файлы изображений и отобразить их на , так что вам не придется рисовать все подряд.)
Там аналогичный «что есть-холст на самом деле-для вопрос здесь:
Может быть, на нем можно было бы нарисовать логотипы компании? Небольшой фрагмент кода JavaScript может быть загружен быстрее, чем файл изображения.
Да, демонстрации холста впечатляют. Именно поэтому вы используете холст. С помощью Canvas вы можете делать много вещей, которые никогда не смогли бы сделать с помощью только html / css / js. Просмотрите руководство по холсту MDC и посмотрите, какой процент примеров, по вашему мнению, можно было бы выполнить только с помощью html. Любая нетривиальная графика, которая должна отображаться на лету (например, диаграммы ) или интерактивная графика (например, игры ), являются прекрасными возможностями для холста.
Вы не сможете создавать более сложные рисунки или анимацию в IE, но с excanvas вы можете визуализировать большую часть своей работы в любом крупном браузере.
Повышение производительности: если вы просто моделируете то, что можно сделать с помощью HTML / JS / CSS ... нет, не сейчас, и вполне возможно, что наоборот. Я не удивлюсь, если для создания и доставки изображения GD с сервера потребуется меньше времени, чем для его рендеринга в некоторых браузерах.
Что касается разницы ...это похоже на сравнение стандартных форм графического интерфейса Windows с DirectX. Вы можете проделать некоторые изящные трюки, растягивая и злоупотребляя обычными элементами HTML, но холст дает абсолютный контроль над пикселями. Пара конкретных примеров того, насколько это важно, один практический и один ничего, кроме:
Bespin - редактор кода, который обходит HTML-элементы, чтобы полностью контролировать рендеринг, а конечный результат выглядит и действует точно так, как то же самое в любой (дружественной к холсту) системе, не противопоставляя жалкие причуды и хитрости HTML личным уловкам и уловкам кодировщика. См. Также: Беспин и холст (хорошее чтение!).
WebGL - реализация OpenGL, 3D API. В нем есть вся математическая буферизация кадров и отображение текстур, которые вы ожидаете от разработки высококлассных игр. Я, конечно, не могу представить, чтобы разработчики HD-консолей торопились переносить свои игры и инструменты на Javascript, но дверь начинает открываться.
Он еще слишком молод, чтобы судить слишком внимательно, как и большинство HTML 5. Подождите год или два, и мы лучше узнаем, сможет ли он взять корону Flash или просто выйдет как VRML .