Canvas и SVG

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

Оглавление:
  1. Canvas vs SVG
  2. Векторная графика
  3. Файл SVG

Пример Canvas сделает изображение JPEG с оттенками серого.

<script type="text/javascript">
  window.onload = function(){
      // создать элемент Canvas
      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>
</p>

Пример 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>

Canvas vs SVG

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

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

Canvas — это простой API. Он работает с пикселями и больше ничего. Следовательно нет никакого способа, изменить существующий рисунок или реагировать на события. Если вы хотите изменить рисунок canvas, нужно переписать JavaScript. Так как canvas зависит от JavaScript, могут быть проблемы, например пользователь отключил JavaScript или использует вспомогательные устройства, такие как читалку, которая не может интерпретировать JavaScript — исправляется тегом <NOSCRIPT>. Образы canvas создаются программно, и требуют знаний в области программирования, которые больше подходят разработчикам, а не художникам.

к меню ↑

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

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

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

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

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

к меню ↑

Файл SVG

В SVG, слои изображения в формате XML. В результате, каждый элемент SVG добавляется к объектной модели документа (DOM), им можно управлять с помощью JavaScript и CSS. Кроме этого, можно подключить обработчики событий для элемента SVG или обновить свои свойства на основе другого документа событий.

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

,
htmlhook.ru | Скрипты для веб-приложений