jQuery剪裁口罩？

Question

什么是最好的jQuery插件(或任何其他javascript方法)，让我创建一个div的剪切掩码。

假设我有一个遮罩(一个三角形)和一个图像。如何使用蒙版仅显示图像的三角形部分？

我不想使用图像，例如:1图片与图像，在它上面我放了另一个绝对定位的div (透明.png)与一个三角形的孔。

所以呢？....:D

Answer 1

如果您打开了html5，那么请看一下canvas元素。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

Answer 2

如果它只是一个你想要遮罩的图像，你可以使用跨浏览器的，甚至可以在IE6中工作的RaphaelJs库。基本上，你绘制一个形状，并用你的图像填充它：

var paper = Raphael(document.getElementById("notepad"), 400, 400);
var r = paper.g.triangle(200, 200, 190);

r.attr({
    stroke: "none",
    fill: "url(http://www.bing.com/fd/hpk2/NabobPass_EN-US1703601557.jpg)" 
});

实况演示：

http://jsfiddle.net/eybNG/

请注意，在我的示例中，我使用了额外库gRaphael，这使得绘制三角形变得非常容易。但这并不是必需的。