如何添加一个蒙版和一个背景到画布元素

我想让一个图像蒙上一张背景图片的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

如何添加一个蒙版和一个背景到画布元素

回答

相关问题