是否有可能使用html5和画布剪辑/屏蔽div? [英] Is it possible to clip/mask a div using html5 and canvas?
问题描述
我有一个照片库,使用图像切断在奇怪的角度,但切出需要透明,以查看背景。我已经能够使用alpha蒙版工作,但必须有一个更好的方法。
不是掩盖图库中的每个图像,我想知道是否可能
我已经能够找到一个jsfiddle,我改变了一点,但它剪辑一个图像 - 不是一个div。现在我有一个完整的大脑冻结,不能想象如何改变它剪辑/掩盖一个div。
一些帮助将非常感激! p>
jsfiddle这里使用下面的代码。请告知是否需要更多信息。
css:
{background:#999}
#mycanvas {width:840px; height:457px; border:1px solid red;}
html:
< canvas id =mycanvas>< / canvas&
js:
code> //抓取画布和绘图上下文
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
//创建图像元素
var img = document.createElement('IMG');
//当图像加载时,绘制它
img.onload = function(){
//保存状态,所以我们可以撤消剪辑
ctx.save();
//创建某种形状的形状
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(840,0);
ctx.lineTo(840,457);
ctx.lineTo(162,457);
ctx.closePath();
//剪切到当前路径
ctx.clip();
ctx.drawImage(img,0,0);
//撤消剪辑
ctx.restore();
}
//指定加载图像的src
img.src =http://www.donina.com/donina/clipper.jpg;
您可以通过旋转使用css3其他div 。如果你需要随机角度,最多你需要四个div。
I have a photo gallery that uses images "cut off" at an odd angle but the cut-out needs to be transparent in order to see the background. I had been able to get it to work using alpha masks but there must be a better way.
Rather than mask each image within the gallery, I wondered whether it might be possible instead to clip/mask the containing div using html5.
I've been able to find a jsfiddle, which I've changed slightly, but it clips an image - not a div. Now I'm having a complete brain freeze and can't think how to change it to clip/mask a div instead.
Some assistance would be much appreciated!
jsfiddle here using code below. Please advise if more info is required.
css:
body {background:#999}
#mycanvas {width:840px;height:457px;border:1px solid red;}
html:
<canvas id="mycanvas"></canvas>
js:
// 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";
You can clip the div's by rotating using css3 other divs. At most you need four divs if you need random angles.
这篇关于是否有可能使用html5和画布剪辑/屏蔽div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!