Fokus三大核心参数深度解析用PADDING、OPACITY和MODIFIER自定义理想高亮体验【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/FokusFokus 是一款极轻量级的 JavaScript 文本高亮库仅约 3kb、零依赖只要选中页面中的任意文字它就用半透明黑色蒙层遮住整页其余部分让选中文本瞬间脱颖而出。这篇文章带你深度解析 Fokus 的三大核心参数——PADDING、OPACITY 和 MODIFIER手把手教你自定义出最适合自己的高亮体验 什么是 Fokus3kb 的轻量级文本高亮工具Fokus 的原理非常巧妙它在页面最顶层动态创建一个canvas元素用深色把整个视口填满再从中抠出你选中的文字区域。效果就是——其他内容全部变暗只有你的选区保持原样清晰可见非常适合长时间阅读长文、文档或代码时聚焦当前内容。它的三大优点让它特别适合学习和二次修改体积极小核心源码 js/fokus.js 只有 300 多行一眼就能看懂零依赖不需要任何第三方库单文件即可运行参数直观全部配置集中在文件开头改三个变量就能定制行为三大核心参数一览所有配置都定义在 js/fokus.js 文件的最开头一目了然参数默认值作用影响PADDING5选区四周的内边距px高亮框是贴脸还是宽松OPACITY0.75暗色蒙层的不透明度0~1聚焦强度是强烈还是柔和MODIFIERnull触发高亮需按住的修饰键是随手选就生效还是按键才生效PADDING微调高亮选区的大小PADDING控制被挖空的高亮框比实际选区大多少像素默认值是5。它的具体作用体现在蒙层重绘逻辑中见 js/fokus.jsFokus 在计算选区坐标时会把上下左右各向外扩PADDING像素再执行clearRect挖空。调大如10~15选区周围留白更充裕视觉上更透气适合阅读散文、博客调小如2~3高亮框紧贴文字边界感更强适合逐字核对代码或数据 小贴士PADDING只影响挖空范围不影响动画配合0.18缓动系数选区切换时会平滑地滑动到新位置。OPACITY调整暗色蒙层的深浅OPACITY决定覆盖层的最终不透明度默认0.75对应rgba(0, 0, 0, 0.75)的黑色蒙层见 js/fokus.js。Fokus 并不是瞬间变暗而是采用渐变淡入淡出有选区时透明度以0.08的比例逐帧逼近目标值见 js/fokus.js取消选择时则快速衰减归零。因此你调的是最终深度调到0.85~0.9近乎完全屏蔽干扰适合需要强专注的场景调到0.4~0.5蒙层若隐若现既有提示又不刺眼适合边读边扫视全貌MODIFIER自定义触发高亮的快捷键MODIFIER默认是null意味着只要划选文字蒙层就立刻出现。它支持四个取值ctrl、shift、alt、cmd以及特殊值none。工作机制是Fokus 会实时监听按键状态并记录在keyModifiers对象中见 js/fokus.js在更新选区时做如下判断见 js/fokus.js——若指定了修饰键但当前没有按住则不更新高亮选区。实际使用建议null/none零成本触发适合读到哪里亮到哪里的纯阅读模式ctrl按住 Ctrl 划选才高亮日常浏览不受打扰需要聚焦时随手一按shift适合配合Shift 拖动选区的精细选择习惯快速上手3 分钟定制你的 Fokus 高亮体验整个流程非常简单三步完成获取源码git clone https://gitcode.com/gh_mirrors/fo/Fokus修改参数打开 js/fokus.js调整开头的PADDING、OPACITY、MODIFIER三个变量即可引用运行页面中直接引入 js/fokus.min.js压缩版或 js/fokus.js可读版就能生效官方自带的演示页 index.html 就是最好的试验田——打开后划选任意段落立即看到蒙层淡入淡出、选区平滑跟随滚动的完整效果。三组实用参数配方 场景PADDINGOPACITYMODIFIER效果沉浸式阅读100.8null宽松留白 强聚焦写代码时辅助核对30.6ctrl紧贴选区按键触发轻度提醒不刺眼50.45shift柔和蒙层随选随亮Fokus 采用 MIT 协议开源详见 README.md随意修改与再分发。三个参数、三十行核心逻辑——这就是它能让你看懂并真正改得动的原因。动手试试吧几分钟就能拥有一个完全属于自己风格的高亮体验 ✨【免费下载链接】Fokus项目地址: https://gitcode.com/gh_mirrors/fo/Fokus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考