Категория: Статьи о графике -> Растровая графика
В разрабатываемой 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
Создать изображение с чистого листа
Загрузить изображение и редактировать
Создать график или диаграмму
Все комментарии (2):
Вот не плохая статья о Video и Canvas в HTML5, возможно тоже будет интересна
Уроки анимации на HTML5
Ваш комментарий