重绘 canvas 不断覆盖其内容 - clearRect() 不起作用？

Question

我正在使用滑块修改一些数字参数并重绘函数图。目前，只有最上面的滑块有效。

问题是：不是替换以前的情节，而是每次重绘覆盖，很快就把所有东西都弄乱了，绝对不是我想要的想要。

最糟糕的是，我无法弄清楚为什么会发生这种情况，因为我似乎正在正确地清理东西。

最新版本的 Firefox 和 Chrome 上的行为相同。

我可能做错了什么？

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">

    <title>Gerador Envelope</title>

</head>

<body onload="redraw();">

    <canvas id="Canvas" width="1000" height="200"></canvas><br/>

    <label>subida</label><input type="range" min="0" max="255" value="0" oninput="baseFreq = this.value; redraw();"/><br/>
    <label>platô</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>
    <label>descida</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>
    <label>repouso</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>
    <label>mod. amp.</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>
    <label>freq. mod.</label><input type="range" min="0" max="255" value="0" oninput="redraw();"/><br/>


    <script type="text/javascript">

        var baseFreq = 1;

        var canvas = document.getElementById('Canvas');
        var cx = canvas.getContext('2d');

        function redraw () {

            var w = canvas.width;
            var h = canvas.height;

            cx.save();

            cx.clearRect(0, 0, w, h);

            cx.fillStyle = '#ddd';
            cx.fillRect(0, 0, w, h);


            cx.translate(0, h/2);

            cx.moveTo(0,0.5);
            cx.lineTo(w,0.5);
            cx.stroke();  

            var array = [];
            var b = w;
            while(b--)
                array[b] = (b+1) / baseFreq; 

            var seno = [];
            seno = array.map(function(x) {
                    return Math.sin(x) * 20;
                });

            cx.moveTo(0, seno[0]);
            for (var x = 1; x < w; x++) {
                cx.lineTo(x, seno[x]);
            }
            cx.stroke();

            array.length = 0;
            seno.length = 0;

            cx.restore();
        }
    </script>


</body>
</html>

Answer 1

在执行绘图命令之前，您需要使用 beginPath 调用开始画线，然后以 stroke 结束。否则，每次重绘时，您只是将绘图命令添加到同一路径。

cx.translate(0, h/2);
cx.beginPath();
cx.moveTo(0,0.5);

你也应该输掉第一个 stroke。你不需要调用它两次。

cx.moveTo(0,0.5);
cx.lineTo(w,0.5);
//cx.stroke();

重绘 canvas 不断覆盖其内容 - clearRect() 不起作用？

Redrawing canvas keeps overwriting its content - clearRect() not working?

javascript

redraw

html5-canvas