是否可以使用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？

回答

相關問題