jQuery剪贴蒙版？

Question

什么是最好的jQuery插件（或任何其他javascript方法），允许我创建div的剪贴蒙版。

假设我有一个面具（一个三角形）和一个图像。如何使用我的面具仅显示图像的三角形部分？

我不想用于图像，例如：带有图像的1张图片，在其上放置另一个带有三角形孔的绝对定位div（透明.png）。

Soooooo ??? ....：D

Answer 1

如果您对html5开放，请查看canvas元素。

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

Answer 2

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

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，这使得绘制三角形变得非常容易。但这不是必需的。