Question

我有一个画布，我在Html中从我的源添加背景图像，然后我从本地计算机插入图像并向图像添加文本，我能够移动/旋转图像和文本没问题。我希望能够将上传的图像和文本移动到背景和背景图像的前面，我找不到解决方案，我认为它涉及多个画布层或类似的东西。请有人建议这样做吗？

        <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>

Answer 1

问题：

画布上有现有图像，您想在现有图像后面绘制另一个图像。

您可以使用context.globalCompositeOperation =“destination-over”来使后续绘图在现有内容的“下方”绘制。

将会保留画布上任何现有的非透明像素，并且新图像仅绘制到透明像素中。

因此，在框架内绘制带有透明像素的墙框架：

context.drawImage(backgroundImage,0,0);

enter image description here

然后将合成设置为“destination-over”

（任何新图纸只会在现有墙框透明的地方显示）。

context.globalCompositeOperation="destination-over";

然后绘制第二张图片：

城市将“落后”现有图像（感谢合成）：

context.drawImage(cityImage,0,0);

Canvas上的多个图像/图层

1 个答案: