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

Если это просто изображение, которое вы хотите замаскировать, вы можете использовать библиотеку 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 , которая позволяет очень просто нарисовать треугольник.Это не обязательно, хотя.