正常html元素的畫布「目標出」的等價物？

我已經搜索了很多，我很確定這不存在，我主要是要確認。我想要做的是有一個div，它使背後的所有東西都變得透明 - 類似於canvas的目標輸出合成選項。正常html元素的畫布「目標出」的等價物？

對於更多的上下文，這裏是情況。我有一個OpenGL窗口繪製QtWebKit覆蓋。 OpenGL窗口有多個可以重疊的「子窗口」，它們使用WebKit疊加層進行裝飾。當它們重疊時，由於這兩層系統，重疊窗口的裝飾不會被遮擋。

備份選項只是爲此使用全窗口畫布（窗口裝飾相當簡單），但它不會更好。請注意，因爲這是一個嵌入式WebKit實例，所以它不需要跨瀏覽器，並且WebKit（或QtWebKit）特定的東西沒有問題。

編輯

我不能在24小時內回答我的問題，所以這裏是我的解決方案，以感謝@Kevin PENO

下面是什麼我一直在尋找一個簡化版本。它創建了兩個「可見」和「不可見」的div。「不可見」掩蓋掉「可見」，以便它顯示背後的背景圖像而不是「可見」div。

真正的鑰匙是-webkit-mask-image（http://www.webkit.org/blog/181/css-masks/）和-webkit-canvas（http://www.webkit.org/blog/176/css-canvas-drawing/），所以這隻適用於基於webkit的瀏覽器。

HTML：

 

<html> 
<body> 
    <div id="visible"/> 
    <div id="invisible"/> 
</body> 
</html>

的JavaScript：

 

function updateMask() 
{ 
    var w = $("#visible").width(); 
    var h = $("#visible").height(); 
    var context = document.getCSSCanvasContext("2d", "mask", w, h); 
    context.fillStyle = "rgba(255, 255, 255, 1.0)"; 
    context.fillRect(0, 0, w, h); 

    var my_off = $("#visible").offset(); 
    var inv_off = $("#invisible").offset(); 
    var rel_left = inv_off.left - my_off.left; 
    var rel_top = inv_off.top - my_off.top; 
    context.clearRect(rel_left, rel_top, $("#invisible").width(), $("#invisible").height()); 
} 

$(window).ready(function() 
{ 
    updateMask(); 


    $("#invisible").draggable(); 
    $("#invisible").bind("drag", function(e, ui) 
     { 
      console.log("drag"); 
      updateMask(); 
      e.preventDefault(); 
     }); 
});

CSS：

 

body 
{ 
    background-image: url(http://www.google.com/images/logos/ps_logo2.png); 
} 

#visible 
{ 
    position: absolute; 
    background-color: red; 
    z-index: 0; 
    width: 1000px; 
    height: 1000px; 
    top: 0; 
    left: 0; 
    -webkit-mask-image: -webkit-canvas(mask); 
} 

#invisible 
{ 
    position: absolute; 
    z-index: 1; 
    width: 100px; 
    height: 100px; 
    top: 50px; 
    left: 50px; 
    cursor: move; 
    background-color: rgba(0, 255, 0, 0.5); 
}

來源

2011-04-20 jfaust

[希望這有助於？]（http://www.webkit.org/blog/181/css-masks/） – 2011-04-20 20:19:12

@Kevin PENO - 我想我可以使用與canvas-生成的面具來達到我想要的效果。現在去嘗試它......謝謝。 – jfaust 2011-04-20 22:02:01

這裏有一個博客帖子大約使用CSS圖像遮罩應用到元素。這聽起來非常接近你正在尋找的東西，或者至少會對某些想法有好處。讓我知道它是如何工作的。

CSS Masks

來源

2011-04-21 14:55:14

這就是它完全解決方案編輯到我的文章。再次感謝。 – jfaust 2011-04-22 05:02:59

正常html元素的畫布「目標出」的等價物？

回答

相關問題