— Pixels Commander

[ In English, На русском ]

Динамические маски с помощью CSS

Это — попытка добавить динамические растровые маски во FlashJS.

Решение не простое и работает только в webkit браузерах, но насколько знаю это первая на сегодня реализация динамических масок через CSS.

Для пользователей FlashJS работа с динамческими масками выглядит очень просто:

objectA.mask = objectB;
objectB.graphics.drawCircle(x,y,r);

Но как это реализовано внутри?

Прием основан на CSS свойстве -webkit-image-mask. Не очень известный факт — значением свойства может быть не только URL файла, но и строка в формате data:URL, а это позволяет передавать данные из JS в CSS.

В этой демонстрации вы рисуете круги на canvas двигая указатель мыши по голове персонажа. Canvas сохраянется в data:URL строку и присваиваются CSS параметру -webkit-image-mask в случае если в маске произошли изменения.

Надеюсь это свойство получит более простой способ связи с JS кодом, на данный момент на сохранение canvas в data:URL тратится огромное количество времени. Ну и ждем аналоги в других браузерах…

 

  • http://anykeytocreate.blogspot.com/ Eugene Krevenets (Hyzhak)

    i have some lags in chrome. Sometimes the hair become visible, less than one second.

  • http://twitter.com/PixelsCommander Denis Radin

    The reason is that browser renders image during CSS property is being assigned and not ready yet. It`s a lot of job for browser to save canvas as string and assign resulted huge string to CSS property.

    There are no any solutions for this yet. But there is simple workaround — if you`ll shave this guy on click, not by timer — there would be no any artifacts.

    It can be fixed only by implementing more generic interface between mask-image CSS property and JavaScript. I`ll report this issue to webkit and mozilla trackers.

  • Аноним

    Simply put, great stuff.

  • Thenexus

    pleeeease this html5/css3 thing is no near flash, so many bugs, so many differences. only workarounds workarounds and more workarounds… and still his hair is there))))

  • Аноним

    http://flashjs.com is like flash, not this stuff, it was experimental part of FlashJS lib, but was not included because works only in chrome / safari and FlashJS is cross-browser thing.