jQuery剪贴蒙版？答案

【问题标题】：jQuery clipping mask?jQuery剪贴蒙版？
【发布时间】：2011-06-23 15:59:46
【问题描述】：

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

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

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

太棒了???.... :D

【问题讨论】：

不是答案，只是仅供参考，CSS 剪辑属性仅支持一种形状；矩形。
当然，任何东西：CSS、jQuery、HTML5、CSS3 等...

标签： jquery mask

【解决方案1】：

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

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

【讨论】：

这仅适用于 mozilla 吗？我正在寻找一个跨浏览器的解决方案
有一个库 (excanvas => code.google.com/p/explorercanvas) 在支持的浏览器上绘制画布，在 IE 上绘制 VML，将不同的调用封装在一个统一的 API 中
@Cristy - 你说 html5 没问题。这意味着您不是在寻找跨浏览器！不过，@steweb 的库很有趣。
断开的链接已损坏

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

【讨论】：