HTML画布-创建荧光笔效果
HTML画布-创建荧光笔效果
提问于 2018-09-10 14:11:57
我正在创建一个双层画布。底层是截图。顶层是画图表面。我想出了一支基本的钢笔。我想要创造一个荧光效果-意味着更大的行设置不透明度.5或更少。我遇到的问题是，当我不止一次地在同一区域上画颜色时，颜色就会互相覆盖在一起。最后，高光将变成固体和遮挡较低层。我想要用原来的颜色平均突出，并能够绘制现有的高光，而不加颜色。
我一直在摆弄globalCompositeOperation，但我尝试过的设置无法获得所需的结果。下面我正在尝试color并使用globalAlpha设置。我也尝试过使用rgba颜色。我也试过只使用一层，但我希望能够清除涂鸦和容易擦除，所以我用两层。我的一些源代码在图片中，但我不确定代码对我的问题有多大帮助。如果需要的话我可以提供更多。谢谢。
编辑:在使用multiply作为globalCompositionOperation之后，颜色#FF0，也就是黄色，在其他颜色中工作得很好。有些颜色仍然有最初的从黑到建的效果，就像我在底图中使用的蓝色。顺便提一下，这些图片不是为了分享我的代码，它们是为了显示荧光效果。顺便提一句，这是一个电子应用程序，所以它现在使用的是铬~ 61。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-11 20:22:47
创建荧光笔效果的正常方法是使用混合模式“乘”。
这将像在真正的纸(减光，不是技术上，但在外观上)，所以画在一个黑暗的背景将产生几乎看不见的荧光效果。
注意，并非所有浏览器都支持混合模式(这包括<= 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52259721
复制相关文章
相似问题
腾讯云开发者
