У меня есть фотогалерея, которая использует изображения, обрезанные под нечетным углом, но вырез должен быть прозрачным, чтобы видеть фон. Я смог заставить его работать, используя альфа-маски, но должен быть лучший способ.
Вместо того, чтобы маскировать каждое изображение в галерее, я подумал, можно ли вместо этого обрезать / замаскировать содержащий div с помощью html5.
Мне удалось найти jsfiddle, который я немного изменил, но он обрезает изображение, а не div. Теперь у меня полное замораживание мозга, и я не могу думать, как изменить его, чтобы вместо этого обрезать / замаскировать div.
Некоторая помощь будет принята с благодарностью!
jsfiddle здесь используя код ниже. Пожалуйста, сообщите, если требуется дополнительная информация.
CSS:
body {background:#999}
#mycanvas {width:840px;height:457px;border:1px solid red;}
HTML:
<canvas id="mycanvas"></canvas>
ЯШ:
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
// Save the state, so we can undo the clipping
ctx.save();
// Create a shape, of some sort
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(840, 0);
ctx.lineTo(840, 457);
ctx.lineTo(162, 457);
ctx.closePath();
// Clip to the current path
ctx.clip();
ctx.drawImage(img, 0, 0);
// Undo the clipping
ctx.restore();
}
// Specify the src to load the image
img.src = "http://www.donina.com/donina/clipper.jpg";