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

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

javascript html canvas html5-canvas

Javascript 如何使用该数据数组从左向右移动画布？,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,每次画布移动时使用相同的数据数组，但不是连续移动如何使用该数据数组从左向右移动画布线如果数据数组已完成，则使用相同的数据连续这是我的密码： <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <

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

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

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

这是我的密码：

<!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>


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“#dbbd7a”；
ctx.fill（）；
var fps=1000；
var n=0；
drawWave（）；
风险值数据=[
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,
];
函数drawWave（）{
setTimeout（函数（）{
请求动画帧（drawWave）；
ctx.lineWidth=“2”；
ctx.strokeStyle='green'；
clearRect（0，0，canvas.width，canvas.height）；
//绘图代码在这里
n+=1.5；
如果（n>200）{
n=0；
}
ctx.beginPath（）；
对于（var x=0；x

您的代码存在一些问题：

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

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

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

使用每秒1000帧的setTimeout是无法实现的（60fps是实际的最大值）

您每次将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();

这是一把小提琴：

[根据OP的新信息添加]

在你进一步澄清之后，我可能会理解你的要求

我认为您希望从画布的左侧创建新的绘图，并使用动画将现有数据推到右侧。从数据[]源打印完所有x、y后，您希望在数据[]的开头重复打印

下面是你如何做到这一点的：

将画布调整为数据宽度的两倍[]
在画布上绘制两次数据。（数据[0-140]，然后再次是数据[0-140]）
将画布转换为图像
将画布调整为数据的宽度[]
通过增加偏移量在画布上设置图像动画，以产生移动的错觉
图像用完时，请重置偏移
由于图像重复两次，因此此重置看起来是无缝的

以下是新代码和另一个小把戏：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
风险值数据=[
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；
小波图像；
createWaveImage（）；
函数createWaveImage（）{
//使画布加倍data.length
//并用背景色填充它
canvas.width=data.length*2；
ctx.fillStyle=“#dbbd7a”；
ctx.strokeStyle=“绿色”；
ctx.线宽=2；
ctx.fillRect（0,0，canvas.width，canvas.height）；
//绘图数据[]两次
ctx.beginPath（）；
ctx.moveTo（0，数据[0]）；
对于（var x=1；x我真的不明白你的意思我想用相同的数组数据从左到右连续移动波？现在它会重复移动谢谢马克。但我想移动那个波，而不是重复那个波..总是用相同的数据向前移动..请更好地解释--非常，非常，非常难理解你需要什么！！你想让这个波保持稳定吗imate，但始终让波浪的前端不偏离画布的右侧？如果我不明白，请解释…是的，始终向前移动我已根据您的附加信息添加到我的答案中。我以为我有似曾相识的时刻，但后来我想起了（特别是耐心部分：）：
ctx.beginPath();
ctx.moveTo(n-1,data[n-1]);
ctx.lineTo(n,data[n]);
ctx.stroke();

<!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>