magenta.js Visualizer（）呈现模糊的注释

Question

我注意到，每当我使用magenta.js的Visualizer内置方法时，它就会呈现出非常模糊的注释（也许是抗锯齿问题？）。我已附上一张图片：

在文档的许多示例中，例如https://piano-scribe.glitch.me/，我也可以看到这种变化的强度。有什么办法可以使我变得锋利或至少将模糊程度降到最低？我不确定这个问题是否已经解决或是否适合洋红色github，所以我在这里发布。

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

Answer 1

这是洋红色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不是整数。我加载了演示页面，在“源”选项卡中打开了相关的js文件，搜索了这一行并放置了一个断点。

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