是否可以使用html5和canvas来剪辑/屏蔽div？

我有一个照片库，使用的图像在一个奇怪的角度“切断”，但切出需要透明才能看到背景。我已经能够使用alpha蒙版来工作，但必须有更好的方法。是否可以使用html5和canvas来剪辑/屏蔽div？

而不是掩模库中的每个图像，我想知道它是否有可能代替夹/使用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";

来源

2011-08-05 circey

您可以通过使用CSS3等div的旋转夹div的。如果你需要任意角度，你最多需要四个div。

来源

2011-08-05 04:17:45 TiansHUo

我可以看到，如果我有一个简单的背景可能工作（我在的jsfiddle用于演示目的做），但是，该网站后台进行构图和DIV需要适当修剪看到背景;不被旋转的div隐藏。 – circey

哦，那么你做错了。你应该在这四个div中包含div并使用overflow：隐藏在它们上面。看看（动画）这里的例子：http://www.romancortes.com/ficheros/page-flip.html – TiansHUo

谢谢，我明白你的意思了（差不多），但我仍然无法看到它会怎么做重叠区域是透明的，以便背景可见。举例来说，请参阅[jsfiddle]（http://jsfiddle.net/EyBPC/2/）。背景需要通过蓝色边框div可见。 – circey

是否可以使用html5和canvas来剪辑/屏蔽div？

回答

相关问题