Зачем использовать <canvas> вместо обычного старого Javascript?

Ответ 1

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 для создания фигур. Простой прямоугольник или квадрат прост, но для рисования диагональной линии потребуется еще много одиночных пиксельных делений, а круг еще хуже. Существуют библиотеки, которые делают это как библиотека Уолтера Цорна, которая довольно старая и известная. Если вы не поддерживаете какой-то древний браузер, это не разумный способ пойти.

Как цитируют люди, вы можете запускать <canvas> в большинстве браузеров, сохраняя Internet Explorer, в котором вам нужна библиотека переводов, например Canvas для браузера Это переведёт код холста к собственному VML IE. Тем не менее, это несколько проблематично с чем-либо из любой сложности esp. поскольку вы полагаетесь на IE медленную реализацию JS для выполнения перевода.

Другие альтернативы векторной графики - это ненавистный (вздох) Flash, IE VML с прямым кодированием и SVG, если браузер поддерживает его. Есть громыхания, что IE9 будет иметь SVG, что является интересной разработкой.

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

• Его текстовая поддержка очень   newish, чтобы получить шрифт на   холст работает только в последних   (в других случаях вам нужно   Наложения HTML/CSS) или неприятные взломы   нарисуйте формы букв на   холст.

• Интерактивность - это взлом и половина.  Если вы хотите сделать холст-рисунок   вы можете использовать   накладываемые карты изображений или теги div или   сделать какую-то ореховую карту пиксельных карт   события и выяснить, какие пиксели   они попали. Изображение холста - это   отображаемая битовая карта и действительно не   предназначено для взаимодействия с тем, сколько   люди хотят. Google в прошлом году   Конференция ввода-вывода несколько танцев   вокруг этого вопроса часы:   http://www.youtube.com/watch?v=AusOPz8Ww80#t=48m54s&feature=player_embedded  API немедленного режима означает, что нет    "сбор" - "холст не будет расти, что   способность" Их упоминание о SVG, являющемся   лучше пропускает производительность и   озабоченность   технологии, коротким допуском   и решение без ответа.

• Не поддерживается родной IE. Извините       эта библиотека перевода не снижает производительность       это для чего-либо значительного и       ясно, что IE все еще является силой браузера       нравится вам это или нет.

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

Ответ 2

<canvas> поверхность чертежа, поэтому полезно, когда вы хотите нарисовать свои собственные фигуры и еще что-то.

Как таковой, его не строго "вместо" JavaScript "вы используете JavaScript для рисования материала на теге <canvas>. Вы не можете нарисовать на HTML-странице с помощью JavaScript, а манипулировать элементами DOM, но это более полезно, чем рисовать, как распознает ваш вопрос.

Лично я не могу думать о чем-то хуже, чем писать кучу кода, чтобы рисовать, скажем, круг на веб-странице (например, использовать графическое программное обеспечение для создания файла изображения), но Id представьте себе для игр и диаграмм то этот уровень управления полезен. (Вы можете вытащить файлы изображений и отобразить их на <canvas>, поэтому его не так, как вы должны рисовать все.)

Здесь аналогичный вопрос "что-есть-canvas-на-самом":

• Что необычные и творческие применения холста html5

Возможно, логотипы компании могут быть нарисованы на нем? Немного кода JavaScript может быть загружен быстрее, чем файл изображения.

Ответ 3

Преимущества производительности: если вы просто имитируете что-то, что можно сделать с помощью HTML/JS/CSS... нет, не сейчас, и, вполне возможно, наоборот. Я не удивлюсь, если потребуется меньше времени для создания и доставки GD-изображения с сервера, чем для того, чтобы сделать то же самое в некоторых браузерах.

Что касается разницы... это похоже на сравнение стандартных форм Windows GUI с DirectX. Вы можете сделать некоторые аккуратные трюки, растягивая и злоупотребляя обычными HTML-элементами, но холст - это абсолютный контроль над пикселями. Несколько конкретных примеров того, насколько велика сделка, одна практическая и одна ничего, кроме:

• Bespin - Редактор кода, который обходит элементы HTML, чтобы полностью контролировать рендеринг, и конечный результат выглядит и действует точно так же на любой (canvas-friendly) системе, не выпивая HTML жалкие причуды и взломать личные недостатки и хаки кодера. См. Также: Bespin and Canvas (хорошее чтение!).

• WebGL - реализация OpenGL, 3D API. Он имеет все математические буферизации кадров и текстур, которые вы ожидаете в разработке игр высокого класса. Я, конечно, не могу представить, чтобы какие-либо разработчики HD-консоли спешили переносить свои игры и инструменты в Javascript, но дверь открывалась.

Пока еще слишком мало, чтобы судить слишком внимательно, как и большинство HTML 5. Дайте ему год или два, и мы лучше узнаем, способен ли он взять флеш-корону или если она просто выходит, как VRML.

Ответ 4

Да, демонстрации на холсте довольно впечатляют. Именно поэтому вы используете холст. Вы можете делать много вещей с помощью холста, которые вы никогда не смогли бы выполнить с помощью html/css/js. Просмотрите учебник по холсту MDC и посмотрите, какой процент примеров вы считаете возможным только с помощью html. Любая нетривиальная графика, которая должна отображаться "на лету" (например, charts) или интерактивная графика (например, игры) - прекрасные возможности для холста.

Вы не сможете выполнять более сложные рисунки или анимации в IE, но с excanvas вы можете отобразить большую часть ваша работа в любом крупном браузере.