— Pixels Commander

[:ru]Динамические маски с помощью CSS[:en]CSS dynamic image masks[:]

[:ru]

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

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

[:en]

It`s try to add dynamic masks to FlashJS.
Very tricky and works only in Chrome/Safari.

Anyway it`s first dynamic raster mask in HTML I`ve ever heard.

[:][:ru]

Для пользователей 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 тратится огромное количество времени. Ну и ждем аналоги в других браузерах…

[:en]

For FlashJS users it just looks like:

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

But how it looks like behind the scene?

There is -webkit-image-mask CSS property.

It can be set not only with file URL, but with data:URL as well.
And it`s possible to save any canvas to data:URL and set this string as mask.

In this demo you draw some circles on invisible canvas by moving mouse over scene, canvas converts it`s pixels to data:URL string which applies to -webkit-image-mask property (in case it has changes).

Hope this CSS property would be improved to catch JS vars directly and would be implemented in every browser.

[:]