Question

有没有办法使用javascript，css，canvas或svg来创建动画蒙版（可以只是二进制）。

我最接近的是使用它：

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

但这只适用于chrome和safari，而且有点儿麻烦。

有没有办法用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();

是否可以动态掩盖/裁剪html元素组？

1 个答案: