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