Проект FireFox очень быстро развиваеться, просто ошеломляя результатами

Обещают новый HTML элемент <canvas> который представляет некий квадратный регион на страничке, как встраиваемый обьект типа апплета или картинки. Внутри этого региона можно отрисовать что угодно, в зависимости от "движка"(контекста).

Читаем: http://developer.mozilla.org/en/docs/Drawi...ics_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 и рисовать функциями не запрашивая "высокоуровнего обьектного интерфейса".


А вообще хочеться побольше документации и что бы ИЕ не подкачал со своей реализацией, благо Сафари фичу уже имеет. Осталось Опере либо умереть, либо идти в ногу со временем.

Угу. Я только "ЗА".
Вообще, сейчас уже web-клиента можно сделать достаточно толстым (я имею в виду, что клиент будет ничуть не хуже, чем написанный на делфях, C++ или на чём-то подобном). Чем больше возможностей будет у клиента, тем "толще" его можно будет сделать. Тем лучше.

З.Ы. Еээх, когда же выйдут аллоды с клиентом-браузером (joke). ^)

Эмиль Эклунд написал эмулятор canvas для Internet Explorer. Небольшой скрипт при помощи VML реализует поддержку базовой функциональности canvas.
Прочитано тут http://browsing.ru/2006/01/06/ie-canvas/
Пробовал играться - играбельно

Sardar
если так сделают, то это очень хорошо.
Будем отрисовывать картинки на клиенте :-)

И пусть выключают поддержку графики в браузере, не поможет

Цитата(Black @ 12.1.2006, 17:33 )

И пусть выключают поддержку графики в браузере, не поможет

тогда будут отключать JavaScript=)
я кстати больше чем уверен, с введением такой фичи в опциях настроек появится отключение canvas ибо я уже представил какое количество банеров будет слеплено по этой + Request технологии...

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

z-END

Цитата(z-END @ 12.1.2006, 17:50 )

тогда будут отключать JavaScript=)

ну, это вряд ли

Цитата(z-END @ 12.1.2006, 17:50 )

в опциях настроек появится отключение canvas

скорее всего именно так и сделают

нормально работает только в FF 1.5