Занятие 7

Вопросы?

Вопросы!

Работа с графикой

  • HTML + CSS
  • SVG
  • Canvas
  • WebGL

HTML + CSS...

Вопросы?

SVG ( Scalable Vector Graphics )

  • XML
  • Векторная графика
  • Совместимость с CSS
  • Размер / сложность

Вопросы?

WebGL
( Web-based Graphics Library )

  • 3D
  • OpenGL / апаратная обработка графики
  • Большое число "объектов"
  • Сложность при работе "на примитивном" уровне
Примеры на http://webglsamples.org/
Инструменты для работы:

Вопросы?

Canvas

  • 2D контекст
  • Работа с примитивами (линии, полифигуры, точки)
  • Перемещение по матрице координат и преобразования
  • "Растровость"
Порядок работы:
Руководство по Canvas 

  var ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);

  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }

Вопросы?

Домашнее задание

Game Of Life Screen

Вопросы?

Demo - Arena
Demo - Sprite Animation
Demo - Sprite Animation *