javascript - 透明图像始终位于 Canvas 之上。在透明图像后面绘制

Question

这是我的 jsfiddle :

我正在寻找两件事:

1. 我一直希望透明图像:"https://s23.postimg.org/c3u19aeqz/bmap_Front.gif" 位于绘图/ Canvas 的顶部。我们称它为前景层 (lfg)。此图像不应过度绘制。

2. 当我将绘图保存为图像时。我只想保存在图像下方绘制的“图纸”。这意味着保存透明图像以外的所有内容。

我试过“玩”:

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 的新手，如果你想帮助我，请考虑改变我的 fiddle ，因为如果它只是一个命令行，我很难理解我应该做什么。

Answer 1

按照您在 OP 中所说的，在 Canvas 顶部添加一个图像元素是可行的方法。通过添加 CSS 规则“pointer-events:none”，您将能够通过图像右键单击 Canvas 并仅保存 Canvas 上的内容。

<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 上绘制图像。