Проект http://www.mozilla.org/products/firefox/ очень быстро развиваеться, просто ошеломляя результатами 
Обещают новый HTML элемент <canvas> который представляет некий квадратный регион на страничке, как встраиваемый обьект типа апплета или картинки. Внутри этого региона можно отрисовать что угодно, в зависимости от "движка"(контекста).
Читаем: http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas
И так что это нам даёт? Как минимум рисование графиков на клиенте Если это всё будет ещё быстро работать, то можно делать "флешевые анимации" используя движок браузера. В будущем обещают 3D контекст, с помощью которого можно отрисовать трёхмерные сцены. Какое яркое и светлое однако будущее!
Посмотрев на примеры увидим что будущий 2D контекст это примитивная штука. Есть поверхность, используя встроенные методы типа fillRect рисуем примитивы. Xолст можно вращать, передвигать и т.д. Но нарисованные примитивы не являються обьектами, если мне нужно сдвинуть квадратик, то его скорее всего нужно затереть и нарисовать по новой. Плюсы подхода - не замороченный интерфейс и очень быстрая работа.
А что если пойти дальше
Представим новый контекст 2D objects, позволяющий создавать примитивы и помещать их в регионы(конверты) в точности как мы это делаем сейчас с деревом документа. Делая анимацию мы сдвигаем слой, а не создаём новый на новом месте, JavaScript(DHTML) way
| Код | //<canvas id="canvas_id" width="300" height="300"></canvas>
var canvas=document.getElementById("canvas_id");
var ctx=canvas.getContext("2D objects"); //наш выдуманный контекст =)
//используя factory методы контекста, прямо как в DOM, создаём примитивы
//но примитив это не сложная вещь как HTML элемент, он не может вдруг стать
//кругом и внутрь него дельзя положить другой примитив
//визуальные свойства:
// ширинa/высотa; координаты относительно текущего региона; цвет/паттерн заливки
// видимость(отключает отрисовку); бордер рисуеться отдельным примитивом, ибо сюда
// нужны отдельные стили и прочая головная боль, хотя не помешали бы стандартные варианты...
var r=ctx.createRectangle(60, 50); //можно задавать свойства при создании
with(r) { //а можно в любой момент из скрипта
fillStyle="rgb(200,0,0)"; //можно задать URL картинки + координаты сдвига
visibility=true;
positionX=10;
positionY=10;
}
//любой примитив отображаеться в определённом регионе, назовём это холстом
//или прозрачным div'ом на абсолютной позиции в HTML
//дефолтовый регион во весь канвас. Регионы удобны что бы компоновать примитивы,
//перемещать/скрывать их группой и для оптимизации рендеринга
//регионы могут вкладываться друг в друга, именно так собираеться дерево сцены
//проще всего видеть регион как отддельный canvas или конверт, куда ложим примитивы
//в конструкторе координаты относительно родительского региона и размеры
//визуальные свойства: размеры, координаты относительно родительского региона, видимость
var reg=ctx.createRegion(0, 0, 200, 200);
reg.add(r);
ctx.getDefaultRegion().add(reg);
ctx.requestPaint(); //обычно всё отрисовываеться вместе с изменениями, как в HTML
//но обычно отрисовка выполняеться в момент простоя скрипта
//вызов requestPaint() останавливает исполнение и быстренько всё рисует, выполнение
//возобновляеться когда всё полностью отрисуеться, тем самым мы точно определяем когда и что рисовать(кадры)
//в этой точке имеем канвас 300х300, квадрат 60х50 сдвинутый на 10px вниз и
// 10px вправо от верхнего левого угла
reg.moveTo(10, 10); //сдвигаем канвас на 10px вниз/вправо, квадрат сдвигаеться вместе с регионом
r.moveTo(0, 0); //сдвигаем квадрат на позицию x:0, y:0 относительно своего региона,
//тем самым он становиться на своё прежнее место x:10, y:10
ctx.requestPaint(reg); //запросить отрисовать можно только специфичный регион, что, тем самым поднимая производительность.
//в этой точке по сравнению с предидущим кадром ничего не изменилось :)
//изменились координаты обьектов
reg.visibility=false; //скрыли регион, канвас теперь пуст
|
Как видим такой подход не на много увеличит затраты ресурсов(только памяти по сути), но поможет сделать рисование увлекательной и простой задачей
Если же приложению нужен полный контроль, то оно может взять контекст 2D и рисовать функциями не запрашивая "высокоуровнего обьектного интерфейса".
А вообще хочеться побольше документации и что бы ИЕ не подкачал со своей реализацией, благо Сафари фичу уже имеет. Осталось Опере либо умереть, либо идти в ногу со временем. |
