Canvas в HTML5 ↓

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

Тег canvasВ разрабатываемой 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
Пожалуйста, при копировании материала ставьте активную ссылку на статью.


Все комментарии (3):
Гриша 2011.03.21 21:26:09

Вот не плохая статья о Video и Canvas в HTML5, возможно тоже будет интересна http://www.clearboth.ru/article/video-canvas-magic.html

piksel 2011.08.03 16:37:11
Сергей 2015.10.24 14:45:07

Какая замечательная статья. Как много лет вы собирали информацию для этой статьи? Что? Просто взяли из самой дешевой кинги про HTML5? Ну ладно, ничего.. так делают все школьники в интренете. Это ваша миссия. Рассказывайте то, про что можно прочитать в документации.


Ваш комментарий

Имя:


Содержание: