html 요소 그룹을 동적으로 마스크/자르기가 가능합니까?

Question

javascript, css, canvas 또는 svg를 사용하여 애니메이션 마스크 (바이너리 일 수도 있음)를 만드는 방법이 있습니까? 크롬 및 사파리에서

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

그러나 이것은 단지 일을하고 약간의 버그가 :

내가 왔어요 가장 가까운

이를 사용하고 있습니다.

정말 간단한 삼각형 마스크를 그릴 때 CSS를 사용하는 방법이 있습니까?

Answer 1

동적 인 경우 캔버스에서 수행하고 원하는 경로를 그립니다. 기본적으로 캔버스는 투명하므로 채워지지 않은 부분은 요소를 아래에 표시합니다. 그러나 정적 마스크가 될 경우 그냥 PNG를 사용하는 것이 좋습니다.

Live Demo

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();