magenta.js Visualizer() 呈现模糊的笔记

Question

我注意到，每当我使用 magenta.js 的内置 Visualizer 方法时，它都会渲染出如此轻微的模糊（可能是抗锯齿问题？）注释。我附上了一张图片：

我也可以在许多文档的示例中看到不同强度的这一点，例如https://piano-scribe.glitch.me/。有没有办法可以获得锐利的边缘或至少减少模糊？我不确定这个问题是否已经解决或者是否适合 magenta github，所以我在这里发帖。

编辑：在画布元素上使用image-rendering: pixelated，放大。

Answer 1

这是 magenta-js 的可视化工具的一个错误（如果你这么称呼它）。看看他们的源代码reveals 中的redraw 方法，每个音符的x 位置和w(idth) 由以下几行确定。

const x = (this.getNoteStartTime(note) * this.config.pixelsPerTimeStep) +
    offset;
const w = (this.getNoteEndTime(note) - this.getNoteStartTime(note)) *
    this.config.pixelsPerTimeStep;

现在，当在画布上绘制时，如果您不在整数上绘制，浏览器将进行插值并尝试绘制接近的表示，从而导致您注意到颜色错误的像素。

剩下要做的就是确认x 和/或w 不是整数。我加载了demo页面，在sources选项卡中打开了相关的js文件，搜索到了这一行，打了个断点。

果然。 x = 13.8 和 w = 15.35999。我已经提交了 magenta-js#238 并进行了修复。