如何使用该数据数组从左向右移动画布

How to move canvas left to right with that data array?

本文关键字：右移动画何使用数据数组更新时间：2023-09-26

每次画布移动但不连续移动时都使用相同的数据数组？

如何使用该数据数组从左向右移动画布线？

如果数据数组完成，则使用相同的数据连续

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <canvas id="canvas" width="160" height="160" style="background-color: black;"></canvas>
        <script type='text/javascript'>

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            ctx.fillStyle ="#dbbd7a";
            ctx.fill();
            var fps = 1000;
            var n = 0;
            drawWave();
            var data = [
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
            ];
            function drawWave() {
                setTimeout(function () {
                    requestAnimationFrame(drawWave);
                    ctx.lineWidth="2";
                    ctx.strokeStyle='green';
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    // Drawing code goes here
                    n += 1.5;
                    if (n > 200) {
                        n = 0;
                    }
                    ctx.beginPath();
                    for (var x = 0; x < n; x++) {
                        ctx.lineTo(x, data[x]);
                    }
                    ctx.stroke();
                }, 1000/fps);
            }
        </script>
    </body>
</html>

您的代码存在一些问题：

动画循环结束时出现非连续延迟的原因...

数组有 140 个元素，但代码尝试绘制 200 个元素。延迟是您的代码尝试绘制 (200-140( 不存在的数组元素。

If(n>=data.length)     // not n>200 (there are only 140 data elements to process!)

使用帧率间隔为 1000 的 setTimeout 是无法实现的(60fps 是实际最大值(。

Var fps=60;   // not fps=1000 is too fast to be achieved

您每次将 n 递增 1.5。这将跳过一些数据元素。如果这不是您的意图，您应该将 n 增加 1。

n+=1;    // not n+=1.5 which will skip some of your data[] elements

您正在清除画布并完全重绘每个动画循环中的波浪。这有效，但相反，保留您之前的画布并添加额外的行来绘制您的下一个 [x，y]。只有在绘制完所有数据点后才能清除。

ctx.beginPath();
ctx.moveTo(n-1,data[n-1]);
ctx.lineTo(n,data[n]);
ctx.stroke();

这是一个小提琴：http://jsfiddle.net/m1erickson/vPXkm/

[根据OP的新信息添加]

经过您的进一步澄清，我可能会理解您想要什么

我认为您希望波形从画布的左侧产生新绘图，并使用动画将现有数据推向右侧。从 data[] 源绘制所有 x，y 后，您希望在 data[] 的开头重复这些图。

因此，这是您如何做到这一点：

将画布大小调整为数据宽度的两倍[]。
在画布上绘制数据两次。(数据[0-140]，然后再次数据[0-140](。
将画布转换为图像。
将画布大小调整为数据的宽度[]。
使用增加的偏移量 X 在画布上对图像进行动画处理，以产生移动的错觉。
当您用完图像时，重置偏移量。
此重置看起来是无缝的，因为图像重复了两次。

这是新代码和另一个小提琴：http://jsfiddle.net/m1erickson/qpWrj/

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <canvas id="canvas" width="560" height="160" style="background-color: black;"></canvas>
        <script type='text/javascript'>
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var data = [
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                148,149,149,150,150,150,143,82,82,82,82,82,82,82,148
            ];
            var fps = 30;
            var offsetX=-data.length*2;
            var waveImage;
            createWaveImage();
            function createWaveImage(){
                // make the canvas double data.length
                // and fill it with a background color
                canvas.width=data.length*2;
                ctx.fillStyle ="#dbbd7a";
                ctx.strokeStyle="green";
                ctx.lineWidth=2;
                ctx.fillRect(0,0,canvas.width,canvas.height);
                // plot data[] twice
                ctx.beginPath();
                ctx.moveTo(0,data[0]);
                for(var x=1; x<data.length*2; x++){
                    var n=(x<data.length)?x:x-data.length;
                    ctx.lineTo(x,data[n]);
                }
                ctx.stroke();
                // convert the canvas to an image
                waveImage=new Image();
                waveImage.onload=function(){
                    // resize the canvas to data.length
                    canvas.width=data.length;
                    // refill the canvas background color
                    ctx.fillStyle ="#dbbd7a";
                    ctx.fillRect(0,0,canvas.width,canvas.height);
                    // animate this wave image across the canvas
                    drawWave();
                }
                waveImage.src=canvas.toDataURL();
            }

            // animate the wave image in an endless loop
            function drawWave() {
                setTimeout(function () {
                    requestAnimationFrame(drawWave);
                    // Draw the wave image with an increasing offset
                    // so it appears to be moving
                    ctx.drawImage(waveImage,offsetX++,0);
                    // if we've run out of image, reset the offsetX
                    if((offsetX)>0){
                        offsetX=-data.length;
                    }
                }, 1000/fps);
            }
        </script>
    </body>
</html>