HTML5 Canvas и SVG

Canvas сам по себе является элементом HTML5, который вы можете разместить в любом месте вашей страницы, так же как и другие элементы HTML5. Рисование Canvas осуществляется с помощью 2D или 3D ( WebGL ).  Сейчас мы сосредоточимся на 2D, потому что 2D больше поддерживается браузерами, а 3D все еще находится в состоянии разработки. Вот код, который отображает изображения JPEG с оттенками серого :



<script type="text/javascript">
  window.onload = function(){
      //try and create a canvas element
      var testCanvas  = document.createElement('canvas');

      //check if object supports getContext() method
      if (testCanvas.getContext !== undefined) {
        var canvas = document.getElementById("effectsCanvas");
        var context = canvas.getContext("2d");

        canvas.style.border = "2px solid blue";

        var destX = 0;
        var destY = 0;
        var imageObj = new Image();

        imageObj.onload = function(){
            context.drawImage(imageObj, destX, destY);
            var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
        	var pixels  = imgData.data;
        	for (var i = 0, n = pixels.length; i < n; i += 4) {
            	var grayscale = pixels[i  ] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
            	pixels[i  ] = grayscale; 	// red
            	pixels[i+1] = grayscale; 	// green
            	pixels[i+2] = grayscale; 	// blue
            	// alpha
        	}
        	context.putImageData(imgData, 0, 0);
        };
        imageObj.src = "Rob_at_Greenfields.jpg";
      }
      else {
        document.writeln('Ваш браузер не поддерживает элемент canvas.');
      }
  };
</script>
</head>
<body>
<h1>Демонстрация Effects HTML5 Canvas</h1>
<p>
  <canvas id="effectsCanvas" width="500" height="550" > </canvas>

SVG
Следующий пример создает овал, с линейным градиентом с помощью SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>


Сравнение различий HTML5 Canvas или SVG

SVG — это вектор, основанный на манипуляции пикселей

Что касается SVG и Canvas , различий визуально мало.

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

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

Векторная графика

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

  • Простая — для документа или иллюстрации.
  • Средней сложности — иллюстрации (например, диаграммы, схемы, карты).
  • Очень сложная — документы (например, используемые при проектировании).

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

SVG зависит от файлов, Canvas использует чистый сценарий

В SVG части изображения определенных в XML. В результате, каждый элемент SVG добавляется к объектной модели документа (DOM) и может управляться с помощью комбинации JavaScript и CSS. Кроме того, вы можете подключить обработчики событий для элемента SVG или обновить свои свойства на основе другого документа событий. Canvas это простой API. Он работает с пикселями и больше ничего. Следовательно, нет никакого способа, изменить существующий рисунок или реагировать на события. Если вы хотите изменить рисунок canvas, вы должны перерисовать его.

Другие вопросы

SVG считается более доступным, потому что он работает с текстом. В случае, если браузер не поддерживает SVG, текстовое содержимое все равно будет отображаться. Сanvas зависит от JavaScript, так что может быть проблемой, если пользователь отключил JavaScript или использует вспомогательные устройства, такие как читатель, он не может интерпретировать выходной JavaScript. Но это может быть исправлено тегом <NOSCRIPT>.

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

Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>