如何添加一個蒙版和一個背景到畫布元素

我想讓一個圖像蒙上一張背景圖片的PNG。它正常工作時，我只把模板圖像，但如果我添加背景圖片的正面圖像不再被屏蔽如何添加一個蒙版和一個背景到畫布元素

<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    var bg = new Image(); 
    var front = new Image(); 
    var mask = new Image(); 

    bg.src = 'img/background.jpg'; 

    bg.onload = function() { 
    front.src = "img/tobemasked.jpg"; 
    }; 

    front.onload = function() { 
    mask.src = "img/mask.png"; 
    } 

    mask.onload = function() { 
    display(); 
    } 

    function display() { 
    context.drawImage(bg, 0, 0); // it works if i remove this line 
    context.drawImage(tmpMask, 0, 0); 
    context.globalCompositeOperation = "source-in"; 
    context.drawImage(front, 0, 0); 
    } 
</script>

我想這是一個相當普遍的問題，但我無法在網絡上找到相關的東西。

謝謝你的幫助。

來源

2013-05-12 16ar

您使用以掩蓋前方圖像的「源 - 在」操作在這裏http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#gcop-source-in定義是這樣的：

顯示源圖像無論二者的源圖像和目標圖像是不透明的。在別處顯示透明度

沒有繪製背景圖像，目標圖像只包含您的蒙版，並且據說具有透明像素。只有在蒙版不透明的情況下，纔會顯示正面圖像。我明白這是你想要的。

但是，繪製完背景圖像後，目標圖像中沒有透明像素，完全不透明，繪製正面圖像時，將顯示其所有部分。

這將完成什麼，我認爲你正在嘗試做的：

context.drawImage(mask, 0, 0); 
context.globalCompositeOperation = "source-in"; 
context.drawImage(front, 0, 0); 
context.globalCompositeOperation = "destination-atop"; 
context.drawImage(bg, 0, 0);

正面圖像首先屏蔽。之後，仍然有透明像素。背景圖像通過「目的地頂點」選項繪製在透明區域上（請參閱上一個鏈接）。

我認爲這是最簡單的方法。其他一些選擇是在多個canvas元素之上使用多個canvas元素來創建圖層或使用一些JavaScript庫，這使得可以使用canvas來使用圖層。

來源

2013-05-12 09:23:42 typhon

謝謝！這正是我所需要的。你爲我節省了幾個小時的工作，因爲我還沒有弄清楚全球組合運作是如何運作的，但現在我清楚地意識到了:) – 16ar 2013-05-12 19:32:18

如何添加一個蒙版和一個背景到畫布元素

回答

相關問題