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();

重绘画布会不断覆盖其内容 - clearRect（）不起作用？

1 个答案: