Question

我想绘制一条线然后等待几毫秒然后再次绘制下一条线等待下一条线等等，以便它可以看到它将如何逐行绘制（像ECG波形一样）。我怎么能在这段代码中做到这一点？这是我的代码：

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

    var ms = 0;
    var y=5;
    var x=5;
    var copyendx=0;
    var copyendy=0;
    var context;
    var temp,total=0;
    //var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,1,3,3,4-,8,5,6,6,7,7);
    var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,4,7,9,2,2,8);
    //alert(data);

    function init() {
        var graphCanvas = document.getElementById('graphSpace');
        context =graphCanvas.getContext('2d');
        drawgraph();
    }

    function drawgraph() {
        drawLine(context,5,50,5,250);
        drawLine(context,5,150,7,150);
        // setTimeout(drawgraph(),600);
        for (var i=0;i<data.length;i++) {
            var startx=5+x;
            var starty=150-(data[i]*y);
            var endx=(5+x)+1;
            var endy=150-(data[i]*y);
            if (i==0) {
                copyendx=endx;
                copyendy=endy;
                startx=5+x;
                starty=150;
            }
            //draw line and wait for some milliseconds
            setInterval(function () {   
                drawLine(context,startx,starty,copyendx,copyendy); }, 100);
                drawLine(context,startx,starty,copyendx,copyendy);
                x=x+5;
                // pausecomp(100);
                copyendx=endx;
                copyendy=endy;
            }
       }
   }
   //Draw line function

   function drawLine(contextO, startx, starty, endx, endy) {
       contextO.beginPath();
       contextO.moveTo(startx, starty);
       contextO.lineTo(endx, endy);
       contextO.closePath();
       contextO.stroke();
   }

 </script>
 </head>
 <body onload="init()">

  <canvas id="graphSpace" width="800" height="400" style="background-color:      #ffff00;"></canvas>

  </body>
  </html>

我尝试过使用setInterval

setInterval(function () {
    drawLine(context,startx,starty,copyendx,copyendy);
}, 100);

但我没有得到理想的输出。我想在为每个线条图

调用方法drawLine(contextO, startx, starty, endx, endy)之前等待几毫秒

我得到了上述问题的解决方案。我有以下问题

如果我想在画布上绘制更多的点，如果这些点不适合我的画布宽度，我正在重绘画布但是这里的问题是我的图形在第一次重绘期间看起来不稳定（就像ECG波形应用）更慢，在第二次重绘期间看起来比第一次重绘更快，在第三次重绘期间它看起来比第二次重绘更快，依此类推。如何克服这个？我想要稳定的流程，直到我绘制我的最后一个图形点。

Answer 1

基本上你需要经历你的循环并设置所有的绘制线。每个应该比前一个晚N毫秒，因此（i * 100）。

所以在循环结束后，将绘制一条线，下一条线将在1 * 100ms中绘制，然后在2 * 100ms内绘制，依此类推......

这是您的代码，几乎没有修改：

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

    var ms = 0;
    var y=5;
    var x=5;
    var copyendx=0;
    var copyendy=0;
    var context;
    var temp,total=0;
    //var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,1,3,3,4-,8,5,6,6,7,7);
    var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,4,7,9,2,2,8);
    //alert(data);

    function init() {
        var graphCanvas = document.getElementById('graphSpace');
        context =graphCanvas.getContext('2d');
        drawgraph();
    }

    function drawgraph() {
        drawLine(context,5,50,5,250,0);
        drawLine(context,5,150,7,150,0);

        for (var i=0;i<data.length;i++) {
            var startx=5+x;
            var starty=150-(data[i]*y);
            var endx=(5+x)+1;
            var endy=150-(data[i]*y);
            if (i==0) {
                copyendx=endx;
                copyendy=endy;
                startx=5+x;
                starty=150;
            }
            //draw line and wait for some milliseconds

                drawLine(context,startx,starty,copyendx,copyendy,i*100); 
                drawLine(context,startx,starty,copyendx,copyendy,i*100);
                x=x+5;

                copyendx=endx;
                copyendy=endy;
            }
       }
   //Draw line function

   function drawLine(contextO, startx, starty, endx, endy,delay) {
       setTimeout(function(){
           contextO.beginPath();
           contextO.moveTo(startx, starty);
           contextO.lineTo(endx, endy);
           contextO.closePath();
           contextO.stroke();
       },delay);
   }

 </script>
 </head>
 <body onload="init()">

  <canvas id="graphSpace" width="800" height="400" style="background-color:      #ffffff;"></canvas>

  </body>
  </html>

Answer 2

具有sleep（100）的循环的概念不是设计用于在javascript中完成的。

摆脱循环，做这样的事情：

var x,y,i=0;
setTimeout(function doDraw() {
    var startx=5+x;
    var starty=150-(data[i]*y);
    var endx=(5+x)+1;
    var endy=150-(data[i]*y);
    drawline(yourargs);
    i++;
    if (i < data.length) {
         setTimeout(doDraw, 100);
    }
}, 100);

Answer 3

setInterval不好。如果花费的时间长于运行间隔，则最终会生成一个要运行的调用备份。坚持使用setTimeout并在你正在运行的块的末尾再次调用它。

Answer 4

这不行。你需要传递对setInterval函数的引用。

   function drawLine(context,startx,starty,copyendx,copyendy){}

   var func = partial(drawline, context,startx,starty,copyendx,copyendy);

   setInterval(func, 100);

Answer 5

尝试setTimeout（“drawLine（context，startx，starty，copyendx，copyendy）”，100）;.这会将它延迟100毫秒。

在javascript中不能等待几毫秒

5 个答案: