HTML5 SVG 2D Введение 13 - CVG Duel Canvas, преимущества и применимый анализ сценариев

До сих пор основные особенности SVG и холста были обобщены. Все они представляют собой технологии 2D -графики, поддерживаемые в HTML5, и все они поддерживают Vector Graphics. Теперь давайте сравним эти две технологии и анализируем их сильные стороны и применимые сценарии.

Во -первых, давайте проанализируем заметные особенности двух технологий и посмотрим на таблицу ниже:

Из приведенного выше сравнения мы видим, что Canvas имеет сильное преимущество в работе пикселей; Хотя самым большим преимуществом SVG является его удобная интерактивность и работа. Использование на холст сильно зависит от размера холста (на самом деле количество пикселей), и на использование SVG относительно сильно зависит от количества объектов (количество элементов). Canvas и SVG все еще различаются с точки зрения методов модификации. После рисования объекта Canvas он не может быть изменен с помощью сценариев и CSS. Объекты SVG являются частью объектной модели документа, поэтому их можно изменить в любое время, используя сценарии и CSS.

На самом деле, Canvas-это графическая система в реальном времени на основе пикселей. После рисования объекта объект не сохраняется в памяти. Когда этот объект снова необходим, его нужно перекрасить; SVG-это графическая система, основанная на форме. После рисования объекта он будет сохранен в памяти. Когда необходимо изменить информацию этого объекта, его можно изменить напрямую. Это фундаментальное различие привело к различиям во многих сценариях применения.

Мы также можем понять это в следующих общих приложениях.

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

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

С точки зрения размера файла (с целью оценки сетевого трафика) изображение SVG и размер изображения PNG не сильно отличаются. Но поскольку SVG масштабируется в виде формата изображения, использование SVG является довольно хорошим выбором, если разработчики хотят использовать изображение в более широком масштабе, или если пользователи используют экраны с высоким DPI.

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

Canvas идеально подходит для неинтерактивной визуализации данных в реальном времени. Например, данные о погоде в реальном времени.

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

Поскольку большинство игр разработаны с использованием API низкого уровня, Canvas легче принять. Но на самом деле, при рисовании игровой сцены, холст должен многократно рисовать и позиционировать форму, в то время как SVG поддерживается в памяти, а изменение связанных атрибутов очень проще, поэтому SVG также является хорошим выбором.

Существует небольшая разница в производительности между холстом и SVG при создании игр с несколькими объектами на мини-игре. Однако по мере создания большего количества объектов код Canvas будет расти намного больше. Поскольку объект Canvas должен быть повторно заменен каждый раз, когда исполняется петля игры, игра Canvas замедляется.

Из -за хорошей интерактивности SVG, несомненно, лучше. Благодаря графическому отображению SVG в режиме SVG вы можете создать все детали пользовательского интерфейса в HTML-подобных тегах в теле. Поскольку каждый элемент SVG и дочерний элемент могут реагировать на отдельные события, вы можете легко создавать сложные пользовательские интерфейсы. Canvas требует, чтобы вы указали, как создать каждую часть пользовательского интерфейса в более сложном порядке кода. Заказ, которым вы должны следовать, является:

• Получите контекст.

• Начните рисовать.

• Укажите цвет каждой линии и каждую заполнение.

• Определите форму.

• Полный рисунок.

Кроме того, холст может обрабатывать только события по всему холсту. Если есть более сложный пользовательский интерфейс, вы должны определить координаты места, которое вы нажимаете на Canvas. SVG может обрабатывать события для каждого дочернего элемента индивидуально.

Следующие два примера иллюстрируют соответствующие технические преимущества Canvas и SVG:

Рендеринги следующие:

После открытия страницы вы можете просмотреть исходный код страницы.

Это приложение должно читать и писать пиксели из двух видео в другое видео, а в коде используются два видео, два полотна и один последний холст. Занимайте один кадр на видео за раз и нарисуйте два отдельных полотна, позволяя читать данные:

ctxsource1.drawimage (Video1, 0, 0, VideoWidth, VideoHeight);

ctxsource2.drawimage (Video2, 0, 0, VideoWidth, VideoHeight);

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

currentFramesource1 = ctxsource1.getimagedata (0, 0, VideoWidth, VideoHeight);

currentFramesource2 = ctxsource2.getimagedata (0, 0, videoWidth, VideoHeight);

После получения код будет просмотреть массив пикселей зеленого экрана и искать зеленые пиксели. Если найден, код заменит все зеленые пиксели на пиксели в фоновой сцене. :

для (var i = 0; i <n; i ++)

{

// Возьмите RBG для каждого пикселя:

r = currentFramesource1.data [i * 4 + 0];

g = currentFramesource1.data [i * 4 + 1];

b = currentFramesource1.data [i * 4 + 2];

// Если это похоже на зеленый пиксель, замените его:

if ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // Target Green (24, 109, 21), так что смотрите вокруг этих значений.

{

pixelindex = i * 4;

currentFramesource1.data [pixelindex] = currentFramesource2.data [pixelindex];

currentFramesource1.data [pixelindex + 1] = currentFramesource2.data [pixelindex + 1];

currentFramesource1.data [pixelindex + 2] = currentFramesource2.data [pixelindex + 2];

currentFramesource1.data [pixelindex + 3] = currentFramesource2.data [pixelindex + 3];

}

}

Наконец, массив пикселей записан на целевой холст:

ctxdest.putimagedata (currentFramesource1, 0, 0);

<! Doctype html>

<html>

<голова>

<script type = "text/javascript">

// Эта функция вызывается, когда кружок нажимается.

функция clickme () {

// отображать предупреждение.

Alert («Вы нажали на элемент пользовательского интерфейса SVG»);

}

</script>

</head>

<тело>

<h1>

Пользовательский интерфейс SVG

</h1>

<!- ​​Создайте панель SVG. ->

<svg>

<!- ​​Создайте круг. ->

<circle cx = "100" cy = "100" r = "50" fill = "gold" id = "uilement" onclick = "clickme ();"

/>

</svg>

<p>

Нажмите на элемент пользовательского интерфейса Gold Circular.

</p>

</body>

</html>

Хотя этот пример прост, он имеет все характеристики пользовательского интерфейса. Из этого примера мы еще раз оцениваем удобную интерактивную природу SVG.

Наконец, используйте изображение, чтобы суммировать технологии, подходящие для каждого приложения. Каждый блок на рисунке представляет тип приложения. Чем ближе к определенной цели, тем больше преимуществ он должен использовать эту технологию:

Индекс скрипта: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Центр разработки: https://developer.mozilla.org/en/svg

Популярная ссылка: http://www.chinasvg.com/

Официальный документ: http://www.w3.org/tr/svg11/