Canvas в HTML5 ↓

Категория: Статьи о графике -> Растровая графика

В разрабатываемой W3C консорциумом спецификации по HTML5 присутствует новый тег - <canvas>. Если язык SVG - это инструмент создания векторной графики на веб-странице, то тег canvas позволяет создавать и работать с растровой 2D графикой. Хотя спецификация HTML5 еще не получила рекомендации (разработка идет крайне вяло), почти все браузеры уже поддерживают некоторые запланированные теги, в том числе canvas:  Opera, Mozilla Firefox, Google Chrome, Safari, а также Internet Explorer (через плагин).

Сам тег только создает холст будущего рисунка, указывая ширину и высоту:

<canvas id="example" width="200" height="200">
Этот текст выведется, если браузер не поддерживает canvas.
</canvas>

Создание рисунка целиком и полность возложено на JavaScript:

var example = document.getElementById('example'); //Указание на холст по ID
//Непосредственная отрисовка рисунка.
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

Данный пример нарисует на холсте прямоугольник.
 

Тег canvas (именно так повелось называть технологию в целом) уже активно используется веб-разработчиками для создания кроссплатформенных визуальных эффектов, динамических интерфейсов и презентаций.

После экспериментов с canvas 3D, промышленный консорциум Khronos Group (разработчик OpenGL) начал создавать спецификацию к стандарту WebGL. Данный стандарт описывает возможность отображения 3D графики в браузере, под любой платформой с OpenGL. По состоянию на июнь 2010 года, спецификация уже почти доработана, предварительные версии некоторых браузеров (FF, Chrome) уже поддерживают WebGL.

Дата: 2010.06.01 в 20:47:13