我一直在尝试在画布元素上获得像素完美的直线。我已经尝试了许多针对其他 stackoverflow 问题和在 WebGL github repo 上打开的问题提出的解决方案。我仍然不确定我错过了什么。我正在尝试用代表当前缩进的三角形绘制标尺（如文字处理器标尺）。此标尺下方的文本段落应使段落的左缩进与标尺上三角形的位置相匹配。我已经成功地做到了，但并不是尺子上的所有垂直线都非常清晰，有些比其他的略粗。这是我针对这种情况的测试沙箱. 然而，在我的屏幕（具有 1.25 devicePixelRatio）上工作得非常好（关于清晰度）的唯一解决方案在不同 dPR 的屏幕上不起作用（关于标尺大小和与标尺的段落对齐）。适用于我测试过的所有屏幕的解决方案（关于标尺大小和段落与标尺对齐）在我测试过的任何屏幕上都不起作用（关于线条清晰度）。有什么想法可以让垂直线变得非常清晰吗？我当然可以忍受它们并不完美，但我相信最终当生成的图形 ui 界面像素完美时，它会带来更好的用户体验。
我不认为在这里发布 jsbin 示例中的所有代码很有用，但我基本上是在做 mozilla 网站上推荐的事情：
//options.rulerLength == 6.25, options.initialPadding == 35
options.canvasWidth = (options.rulerLength * 96 * window.devicePixelRatio) + (options.initialPadding*2);
canvas.style.width = options.canvasWidth + 'px';
canvas.style.height = options.canvasHeight + 'px';
canvas.width = options.canvasWidth * window.devicePixelRatio;
canvas.height = options.canvasHeight * window.devicePixelRatio;
context.scale(window.devicePixelRatio,window.devicePixelRatio);
在我最初的任务中，我天真地着手制作一个与现实生活中的单位尺寸完全相同的尺子，直到研究我发现这目前是不可能的（并且被认为对网络标准并不重要）所以我放弃了尝试让尺子匹配现实生活中的单位英寸或厘米（由于此 UI 将成为 Google Docs 插件的一部分，我什至尝试测量 Google Docs 文档顶部的标尺，实际上它与实际单位英寸不对应） . 所以我给了标题“CSS 英寸尺子”，我放弃了尝试真正的单位英寸尺子，并接受了创建“CSS 单位英寸”尺子。但我现在的主要优先事项，除了保持段落和标尺同步之外，是获得像素清晰的线条......
从上述测试中选择“INCHES”和“更大的绘制精度（在我的 1.25 dPR 显示器上）”给了我这个结果：
但是该解决方案仅适用于我的 1.25 dPR 显示器，并且仅在绘制“INCHES”时才有效。
选择“推荐的绘图”（来自 Mozilla 网站的解决方案）使段落与所有显示器上的标尺很好地对齐，但给了我这种垂直线：
我尝试将上下文翻译 0.5，尝试通过 dPR 进行翻译，尝试将需要绘制的线的 x 位置四舍五入，但似乎没有任何效果。有些线条很清晰，有些则不然。（顺便说一句，我只在 Chrome 上进行了测试。）我已经尝试了在此评论末尾提到的 3 步过程，但无论是否舍入，无论是否翻译，都无法正常工作......
我没有尝试过此评论中提到的 getBoundingClientRect ，我不确定我将如何实现它，如果这可能是一个解决方案并且任何人都可以提供帮助，我将不胜感激。随意修改 jsbin 沙盒测试中的代码。