Canvas上的多個圖像/圖層

我有一個畫布，我添加了一個背景圖像到我的源代碼中，然後從本地計算機插入圖像並添加文本到圖像，我可以移動/旋轉圖像和文字沒有問題。我希望能夠將上傳的圖像和文本移到背景圖像的前面，我找不到解決方案，我認爲它涉及多個Canvas圖層或類似的東西。請有人建議一種方法來做到這一點？Canvas上的多個圖像/圖層

 <div class="well" style="height:350px;"> 
     <a name="1"><center>Sonstiges</center></a> 
     <div class="cleaner_h3"></div> 
     <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son01r.png"> 
     <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son02r.png"> 
     <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son09.png"> 
     <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son04p.png"> 
     <img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son05p.png"> 
     </div> 

    Jquery portion where I add the background image 

     $(".img-polaroid").click(function(e){ 
        var el = e.target;   
        var design = $(this).attr("src");  //src is the particular image you click on 
        $('#tcanvas').css({ 


         'backgroundImage': 'url(' + design +')', 
         'backgroundRepeat': 'no-repeat', 
         'backgroundPosition': 'top center', 
         'background-size': '100% 100%' 



             }); 
      }); 


    Canvas element 

     <div id="phoneDiv" class="page" style="width: 800px; height: 800px; position: relative;left:5%; background-color: rgb(255, 255, 255);"> 
     <canvas id="tcanvas" width=800 height="800" class="hover" style="-webkit-user-select: none;"></canvas> 


    </div>

來源

2014-02-20 user1630140

問題：

你必須在畫布上現有的圖片，你想畫另一個圖像現有的圖像後面。

您可以使用context.globalCompositeOperation =「destination-over」使後續繪圖在「現有內容下」繪製。

會發生什麼情況是，畫布上任何現有的非透明像素都將保留，並且新圖像僅繪製到透明像素中。

所以得出這樣的壁框架與框架內部透明像素：

context.drawImage(backgroundImage,0,0);

enter image description here

然後設置合成到「目的地越過」

（任何新的繪圖將僅顯示現有的牆架是透明的）。

context.globalCompositeOperation="destination-over";

再畫第二圖像：

enter image description here

的城市將被「拉後面」現有的圖像（感謝合成）：

context.drawImage(cityImage,0,0);

enter image description here

來源

2014-02-20 20:11:49 markE

Canvas上的多個圖像/圖層

回答

相關問題