HTML画布-创建荧光笔效果

Question

我正在创建一个两层的画布。底层是屏幕截图。顶层是工程图表面。我想出了一支基本笔。我要创建一个荧光笔效果-意味着设置不透明度为0.5或更小的较大线条。我遇到的问题是，当我在同一区域绘制多于一次时，颜色会相互重叠。最终，高光将变为实心并遮挡下层。我想用原始颜色均匀地突出显示颜色，并且能够在不增加颜色的情况下覆盖现有的突出显示颜色。

我一直在搞怪globalCompositeOperation，但是用我尝试过的设置无法获得理想的结果。下面，我正在尝试color并使用globalAlpha设置。我也尝试使用rgba颜色。我也尝试仅使用一层，但是我希望能够轻松清除涂鸦并擦除，所以我选择了两层。我的一些源代码在图片中，但是我不确定代码对我的问题有多有用。如果需要，我可以提供更多。谢谢。

编辑：将multiply用作globalCompositionOperation后，颜色#FF0（也称为黄色）在其他颜色中效果很好。某些颜色仍然具有原始的构建为黑色的效果，例如我在底部图片中使用的蓝色。附带说明一下，这些图片不是要分享我的代码，而是要显示荧光笔效果。附带说明，这是一个Electron应用程序，因此它当前正在使用Chromium〜61。

Answer 1

创建荧光笔效果的通常方法是使用混合模式“乘”。

这就像在真实的纸张上一样（相减的光线，不是技术上的而是外观），因此在深色背景上绘制会产生几乎不可见的荧光笔效果。

请注意，并非所有浏览器都支持混合模式（包括<= IE11）。

const ctx = c.getContext("2d");
ctx.globalCompositeOperation = "multiply";
ctx.font = "40px sans-serif";
ctx.fillText("HIGHLIGHT ME", 5, 84);        // replace with bg image
ctx.fillStyle = "#ff0";
c.onmousemove = e => ctx.fillRect(e.clientX-10, e.clientY-10, 20,20);

html, body {margin:0}
#c {border:1px solid}

<canvas id=c></canvas>

在深色背景上：

const ctx = c.getContext("2d");
ctx.fillStyle = "#333";
ctx.fillRect(0,0,c.width,c.height);
ctx.font = "40px sans-serif";
ctx.fillStyle = "#fff";
ctx.fillText("HIGHLIGHT ME", 5, 84);        // replace with bg image
ctx.fillStyle = "#ff0";
ctx.globalCompositeOperation = "multiply";
c.onmousemove = e => ctx.fillRect(e.clientX-10, e.clientY-10, 20,20);

html, body {margin:0}
#c {border:1px solid}

<canvas id=c></canvas>