Можно ли динамически маскировать / обрезать группу элементов html? - PullRequest
Новая
       13

Можно ли динамически маскировать / обрезать группу элементов html?

1 голос
/ 15 декабря 2011

Есть ли способ использовать javascript, css, canvas или svg для создания анимированной маски (может быть просто двоичной).

Самое близкое, что я пришел, это: 

var data = canvas.toDataURL();
$('#masked').css("-webkit-mask-image","url("+data+")");

Но это работает только в Chrome и Safari и немного глючит.

Есть ли способ использовать css для рисования действительно простой треугольной маски?

1 Ответ

2 голосов
/ 15 декабря 2011

Если он будет динамичным, вы можете сделать это с помощью canvas, нарисуйте желаемый путь и заполните его, по умолчанию canvas прозрачный, поэтому любая из незаполненных частей покажет элемент под ним. Однако, если это будет статическая маска, я предлагаю просто использовать png.

Демонстрация в реальном времени 

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 200;

// make a path for a triangle
ctx.beginPath();  
ctx.moveTo(0,0);
ctx.lineTo(200,0);
ctx.lineTo(200,200);
ctx.lineTo(100,50);
ctx.lineTo(0,200);
ctx.lineTo(0,0);
ctx.fill();
...