Графика в HTML5

Canvas

Canvas (англ. canvas — «холст») — набор API для создания и управления графикой обычно на JavaScript. Сanvas позволяет

Появление Canvas

Придумано Apple в 2004, как компонент в движке WebKit Mac OS

Поддержка Canvas

Имитация: через VML ExplorerCanvas, через Flash fxCanvas.

Особенности

Изменение высоты или ширины холста сотрет всё его содержимое и все

Критика

Нагружает процессор и оперативную память;
Плохая производительность при большом разрешении;
Приходится вырисовывать отдельно

Варинты использования

Анимированная графика

Варинты использования

Веб-приложения

Варинты использования

Игры

Синтаксис

Атрибуты
Height -задает высоту холста. По умолчанию 300 пикселов.
Width - задает

2D контекст отрисовки

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Стандартная система кординат

Canvas API

Прямоугольник

ctx.fillStyle = "rgb(65, 60, 50)";
ctx.fillRect(25, 50, 100, 100);
ctx.strokeStyle =

Круг

ctx.fillStyle = "rgb(65, 60, 50)"; ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI

Кривые

ctx.strokeStyle = "rgb(65, 60, 50)"; ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(70, 50, 130,

Рисование линий
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();

Текст

ctx.font = 'bold 7em "PT Sans", sans-serif';
ctx.fillStyle = 'rgba(0, 0,

Тени (Shadow API)

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;

Градиенты

var g1 = context.createLinearGradient(sx, sy, dx, dy); g1.addColorStop(0, '#f00');
g1.addColorStop(0.5, '#ff0');