Wavesurfer：Spotty Canvas 使用 lineTo() 和 Stroke() 的图形

Question

有一个很棒的音频可视化库，叫做 wavesurfer：https://github.com/katspaugh/wavesurfer.js/

我需要可视化（波形渲染）看起来更像心音图，所以我编辑了初始代码。

更具体地说，我更改了 drawWave 方法中的代码

    cc.beginPath();
    cc.moveTo($, halfH);

    for (var i = 0; i < length; i++) {
        var h = Math.round(peaks[i] * coef);
        cc.lineTo(i * scale + $, halfH + h);
    }

    cc.lineTo(this.width + $, halfH);
    cc.moveTo($, halfH);

    for (var i = 0; i < length; i++) {
        var h = Math.round(peaks[i] * coef);
        cc.lineTo(i * scale + $, halfH - h);
    }

    cc.lineTo(this.width + $, halfH);
    cc.fill();

    // Always draw a median line
    cc.fillRect(0, halfH - $, this.width, $);
}, this);

至

    cc.beginPath();
    cc.moveTo($, halfH);

    for (var i = 0; i < length; i++) {
        var h = Math.round(peaks[i] * coef);
        cc.lineTo(i * scale + $, halfH - h);
    }

    cc.stroke();

    // Always draw a median line
    cc.fillRect(0, halfH - $, this.width, $);
}, this);

我的意图是删除镜像效果并将其从 fill() 更改为 stroke() 所以它只是一条线。然而，效果不稳定且奇怪。

这可能与此人的问题 (Canvas drawing with lineTo after clearRect() shows spotty lines) 有关，在调用 clearRect 后，他的线条参差不齐，但他没有显示图像或代码源，所以我不能确定。此外，在 wavesurfer 代码中也没有对 clearRect() 的引用，所以也许我在抓稻草。编辑 - 实际上有对 clearRect 的引用，但它似乎不相关；更多更新 2

我已经向可视化工具的作者征求意见，以防这与影响 drawWave 方法的另一种方法有关，但我也想 post 在这里看看是否有明显的东西我不见了。如果您有想法，请随时给我一个大致的研究方向；我已经玩了几个小时了，除了尝试在不包含该库的更简单示例中重新创建问题之外，我没有其他想法。到目前为止，没有骰子。

下面是我的 fiddle，其中包含修改后的 wavesurfer 库。

https://jsfiddle.net/morgwild/5sm3momk/

更新一：

这绝对是与我的更改交互的代码的不同部分；我把原来的 fiddle 删减到我写的部分，看起来很棒。

https://jsfiddle.net/morgwild/7x3wyhxh/

所以，现在我正在深入研究原始代码，看看之后会发生什么，并破坏我想要的图像。

更新二

糟糕，代码中有一个 clearRect()。

this.waveCc.clearRect(0, 0, this.width, this.height), this.progressCc && this.progressCc.clearRect(0, 0, this.width, this.height)

然而，我更新了更新一中提到的fiddle，线条看起来仍然不错。因此，仍然没有在更简单的上下文中重新创建问题。

Answer 1

波形库带有像素比选项。它不能 100% 解决问题，但可以解决大部分问题。

Wavesurfer：Spotty Canvas 使用 lineTo() 和 Stroke() 的图形

Wavesurfer: Spotty Canvas Graph Using lineTo() and Stroke()

javascript

canvas

graph