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

Question

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

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

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

Answer 1

这是 magenta-js 的可视化工具的一个错误（如果你这么称呼它）。看看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不是整数。我加载了演示页面，在源选项卡中打开了相关的js文件，搜索了这一行并放置了一个断点。

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