可以使用html5和canvas裁剪/遮罩div吗？
可以使用html5和canvas裁剪/遮罩div吗？
提问于 2011-08-05 12:13:29
我有一个图片库，它使用图像“切断”在一个奇怪的角度，但剪切需要是透明的，以便看到背景。我已经能够使用alpha掩码让它工作，但肯定有更好的方法。
我想知道是否可以使用html5裁剪/屏蔽包含的div，而不是屏蔽图库中的每个图像。
我已经找到了一个jsfiddle，我对它做了一些修改，但它剪切的是图像，而不是div。现在我的大脑完全冻结了，不能思考如何改变它来剪辑/屏蔽一个div。
如果能得到一些帮助，我们将不胜感激！
使用以下代码的jsfiddle here。如果需要更多信息，请告知。
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";回答 1
Stack Overflow用户
回答已采纳
发布于 2011-08-05 12:17:46
您可以通过使用css3其他div旋转来裁剪div。如果你需要随机角度，你最多需要四个div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6951342
复制相关文章
相似问题
腾讯云开发者
