javascript - HTML Canvas - 创建荧光笔效果
问题描述
我正在创建一个两层画布。底层是截图。顶层是绘图表面。我想出了一支基本的笔。我想创建一个荧光笔效果 - 意味着设置不透明度 0.5 或更低的更大线条。我遇到的问题是,当我不止一次在同一区域上绘制时,颜色会相互重叠。最终,高光将变为实心并遮挡下层。我想用原始颜色均匀地突出显示,并且能够在不叠加颜色的情况下绘制现有的高光。
我一直在搞乱 globalCompositeOperation 但无法通过我尝试过的设置获得所需的结果。下面我正在尝试color
并使用 globalAlpha 设置。我也尝试过使用rgba
颜色。我也尝试只使用一层,但我希望能够轻松清除涂鸦和擦除,所以我选择了两层。我的一些源代码在图片中,但我不确定代码对我的问题有多大帮助。如果需要,我可以提供更多。谢谢。
编辑:在使用黄色之后multiply
,在其他颜色中效果很好。有些颜色仍然具有原始的黑色效果,例如我在底部图片中使用的蓝色。作为旁注,这些图片不是为了分享我的代码,它们是为了显示荧光笔效果。附带说明一下,这是一个 Electron 应用程序,因此它目前使用 Chromium ~ 61。globalCompositionOperation
#FF0
解决方案
创建荧光笔效果的常规方法是使用混合模式“相乘”。
这就像在真实的纸上一样(减光,不是技术上而是外观上),所以在深色背景上绘图会产生几乎看不见的荧光笔效果。
请注意,并非所有浏览器都支持混合模式(包括 <= 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>
推荐阅读
- go - 如何使用 github.com/mattn/go-sqlite3 为 Google Cloud VM 交叉编译 Go 包?
- python - 如何识别送达通知中的消息?
- javascript - 尝试使用 JavaScript 设置视频的 src 属性,得到 TypeError: videofile is null
- python - 使作为参数给出的函数真正可见
- javascript - 将剪贴板内容作为字符串变量获取
- java - 颤振插件:无法读取文件LocalFile:kotlin类的路径
- android - 如何使用 ViewModel 的新保存状态模块
- r - 多条件下的数据框子集
- reactjs - 返回 bool 值反应 redux
- python - timeit 在 Python 中是如何工作的?