class DarkRaha extends com { // разработка приложений
            String a="Главная" b="Контакты" c="О сайте"
};

HTML

DOM HTML

введение
объектной модель DHTML
события
свойства и методы
объект window
объект navigator
объект screen
объект history
объект location
объект document
объект event
объект Canvas

разное

генерация кода
фреймы
вставка текста в позицию каретки
скрыть/показать текст
ширина ячеек таблицы

Справочник по DHTML

2D графика в HTML

С подачи браузера Safari от Apple в пятый стандарт HTML был добавлен элемент canvas(холст) для вывода графики и создания простой анимации. В большинтсве случаев это хорошая альтернатива закрытой технологии Flash. В будущем планируется поддержка трехмерной графики на основе OpenGl.

Для краткости в описаниях методов я опустил возвращаемый тип void и типы аргументов. Координаты и размеры задаются числом с плавающей точкой (float).

контекст вывода

В первую очередь необходимо получить непосредственно объект вывода соответствующий элементу canvas. Для этого у последнего определен метод getContext. На случай если браузер не поддерживает холст вообще как IE или только отдельные методы, например метод fillText доступен в FF с версии 3.1, код вывода лучше заключить в блок try.


<canvas id="canva" width="150px" height="150px"></canvas>
<script type="text/javascript">
//<![CDATA[ 
var canvas = document.getElementById('canva');
var ctx;

// код вывода
try{
ctx = canvas.getContext('2d');
ctx.fillStyle ="#0000fa";
ctx.fillRect(50,50,30,60);
ctx.fillStyle ="#00ff00";
ctx.fillText("Hello World", 10, 25); 
}catch(e){	
}
//]]>
</script>

перо и кисть

Перо для вывода контуров, кисть для закраски. Стиль пера определяется атрибутом strokeStyle, а стиль кисти атрибутом fillStyle. В качестве значений может выступать строка, содержащая css определение цвета, или объект, создаваемый одним из следующих методов:

прозрачность

Кроме прозрачности в значении цвета, есть возможность определить глобальное значение прозрачности через свойство globalAlpha. Значение 0 - полная прозрачность, значение 1.0 - полная не прозрачность.

четырехугольники

Среди фигур напрямую поддерживается только четырехугольник. Остальные фигуры можно создать контурами самим или воспользоваться одной из готовых библиотек, где все это реализовано.

контуры

Для работы с контуром определены следующие методы:

стиль линии

Стиль линии задается следующими свойствами и методами:

изображения

Можно использовать любые изображения или холсты определенные на страницы. Для их доступа можно воспользоваться обычными DOM средствами как коллекция изображений (document.images), методы getElementsByTagName и getElementById.

Другой вариант - создание изображения прямо в скрипте


var img = new Image();   // объект изображения   
img.onload = function(){/* выводим изображение на холст если нужно*/}  
img.src = "myimg.png"; // указываем адрес изображения  

Также позволяются изоражения внедренные механизмом data: url


var img = "data:image/gif;base64, ...данные изображения...";

Имея изображения, его можно вывести на холст одним из следующих методов:

растровые данные

Для хранения растровых данных предусмотрен объект ImageData, имеющего всего три члена данных:

Информация о пикселях в массиве CanvasPixelArray хранится в виде значений целых чисел от 0 до 255 в формате rgba. Для работы с растровыми данными определены следующие методы:

текст

Для вывода текста используются следующие свойства и методы:

преобразование координат

Координатная плоскость: Ox направлена вправо, Oy направлена вниз, начало координат верхний левый угол холста. Поддерживаются обычные возможности преобразования координат для двухмерной графики:

состояние контекста

Можно сохранить в стеке текущее состояние контекста. Туда входят значения стилей и текущая матрица преобразования.

библиотеки

В IE существует своя технология векторной графики на основе xml формата - VML. Будет ли в будущем поддерживаться объект canvas не известно. С помощью дополнительных JavaScript библиотек уже сейчас возможна эмуляция canvas в IE, без изучения vml. Все что нужно это подключить компилированную версию библиотеки на страницу.

Другая библиотека кроме кроссбраузерности, определяет готовые методы вывода различных фигур.


Рейтинг@Mail.ru