HTML5 Canvas против SVG

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

В SVG  вы рисуете с помощью XML.  В Canvas, вы рисуете с JavaScript.  Canvas-изображение разбито на пиксели,  после отрисовки они как бы "стираются" или "забываются". SVG, с другой стороны, создает DOM узлы, доступные пока он не удален. Обе технологии имеют свои преимущества и недостатки.

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

Этот код SVG:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
    <ellipse cx="50" cy="25" rx="50" ry="25" fill="blue" stroke="none" />
</svg>

пример использования SVG - http://maxistar.ru/kitchen/test_svg.html

Canvas отображается в пикселях.  Масштабирование может привести к пикселизации. Canvas изначально менее доступен, доступность ограничивается в основном в рендеринге содержимого. Интерактивность требует перерисовки каждого пикселя. К тому же нет DOM узлов для того, что вы рисуете.  Там нет анимации API, вместо таймера, как правило, используется многократное обновление сanvas.  Canvas , однако, очень хорошо подходит для редактирования изображений, генерации растровой графики, также как для игр, и операции, требующие манипуляций на уровне пикселей . Canvas может быть экспортирован в GIF или JPEG.

С помощью Canvas можно изображать 2D-проекции трехмерных объектов. В силу того, что все преобразования выполняются на пиксельном уровне, достаточно просто создать необходимые интерфейсы для изометрических проекций трехмерных объектов.

Так как Canvas  реализован еще не во всех браузерах, для этого в спецификации HTML5 описаны действия, которые нужно выполнять браузеру если поддержка нового элемента отсутствует.
Альтернативный контент нужно поместить внутри тега <canvas>:

<canvas id="example" width="150" height="150">
<p>Ваш браузер не поддерживает canvas</p>
</canvas>

Браузеры, которые не поддерживают canvas, будут игнорировать контейнер и будут обрабатывать только его содержание. Другие браузеры будут игнорировать содержание контейнера, а обработают только сам контейнер.

Тег <canvas> предназначен для рисованиz 2D и 3D объектов.

При инициализации тег пуст и для рисования нам необходимо получить доступ к обрабатываемому контексту (rendering context).
Пример:

<!DOCTYPE html>
<html>
 <head>
  <title>Canvas tutorial</title>
  <script type="text/javascript">
   function draw(){
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext){
     var ctx = canvas.getContext('2d');
    }
   }
  </script>
  <style type="text/css">
   canvas { border: 1px solid black; }
  </style>
 </head>
 <body onload="draw();">
  <canvas id="tutorial" width="150" height="150"></canvas>
 </body>
</html>

пример использования Canvas  - http://html5blog.ru/examples/canvas-simple-example.php 

вот например флаг Японии с помощью Canvas

<script>
  var el= document.getElementById("flag");

  if (el && el.getContext) { 
  var context = el.getContext('2d');
      if(context){
          context.fillStyle   = "#ffffff"; 
          context.strokeStyle = "#CCCCCC"; 
          context.lineWidth   = 1;
          context.shadowOffsetX = 5;
          context.shadowOffsetY = 5;
          context.shadowBlur    = 4;
          context.shadowColor   = 'rgba(0, 0, 0, 0.4)';
          context.strokeRect(10, 10, 300, 200);
          context.fillRect(10, 10, 300, 200);
          context.shadowColor='rgba(0,0,0,0)';
          context.fillStyle = "#d60818";
          context.arc(160, 107, 60, 0, Math.PI*2, false);
          context.fill();

      }
  }
  </script>

Canvas функции и свойства:


Styles

Set the fillStyle
context.fillStyle="color"
Set the strokeStyle
context.strokeStyle="color"
Line widths
context.lineWidth=number
Line join styles
context.lineJoin="bevel || round || miter"
Line end styles
context.lineCap="butt || round || square"

Rectangles

Draw a rectangle
context.strokeRect(left, top, width, height)
 
Fill a rectangle
context.fillRect(left, top, width, height)
Erase a rectangle
context.clearRect(left, top, width, height)

Paths

Begin a path
context.beginPath
Complete a path
context.closePath
Move the pen to a location
context.moveTo(horizontal, vertical)
Draw a straight line from current point to a new location
context.lineTo(horizontal, vertical)
Stroke the current path
context.Stroke()
Fill the current path
context.fill()

Shadows

Shadow color
context.shadowColor="color"
Shadow horizontal offset
context.shadowOffsetX=number
Shadow vertical offset 
context.shadowOffsetY=number
Shadow blur
context.shadowBlur=number

Комментарии

Отправить комментарий