Question

这是我的jsfiddle：

我正在寻找两件事：

我总是希望透明图像："https://s23.postimg.org/c3u19aeqz/bmap_Front.gif"位于绘图/画布的顶部。让我们称之为图层前景(lfg)。这张图片永远不应该被覆盖。
当我将图形保存为图像时。我只想保存＆＃34;图纸＆＃34;在图像下面绘制的。这意味着保存除透明图像以外的所有内容。

我试过＆＃34;玩＆＃34;用：

ctx.globalCompositeOperation = "source-over";
ctx.globalCompositeOperation = "destination-over";

和

    <div id="LayerTown" class="containerChild" style="position: relative;">
        <canvas id="canvas" style="position: absolute; left: 0; top: 0; z-index: 0;">
          Update your browser
        </canvas>
        <img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; left: 0; top: 0; z-index: 1;">    
    </div>

到目前为止，没有什么能帮助我。因为我非常喜欢html / css / js，如果你想帮助我，请考虑改变我的小提琴，因为我很难理解我应该做什么，如果它只是一个命令行。

Answer 1

按照你在OP中所说的做法，在画布上添加一个图像元素是可行的方法。通过添加CSS规则＆＃34;指针事件：无＆＃34;您将能够通过图像右键单击画布并仅保存画布上的内容。

<div id="LayerTown" class="containerChild" style="position: relative;">
    <canvas id="canvas" style="position: absolute;">
      Update your browser
    </canvas>
    <img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; pointer-events: none;">    
</div>

您还必须从脚本中删除addImg2Canvas（）函数，因为我们不再想在画布上绘制图像。

透明图像始终位于Canvas之上。画在透明图像后面

1 个答案: