css - magenta.js Visualizer() 渲染模糊笔记

Question

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

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

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

Answer 1

这是 magenta-js 可视化工具的一个错误(如果你这么调用它的话)。查看源代码中的 redraw 方法 reveals每个音符的 x 位置和 w(idth) 由以下行确定。

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

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

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

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