0

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

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

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

这是我的代码：

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

1 回答 1

2

您的代码存在一些问题：

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

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

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

无法使用 fps 间隔为 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]）。
  • 将画布转换为图像。
  • 将画布大小调整为数据 [] 的宽度。
  • 使用增加的 offsetX 为画布上的图像设置动画，以产生运动的错觉。
  • 当您用完图像时，请重置偏移量。
  • 由于图像重复了两次，因此此重置看起来是无缝的。

这是新代码和另一个小提琴：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>
于 2013-10-10T15:51:55.850 回答