Document // source http://jsbin.com/sovepenetu

<!doctype html>
  
<html lang="en">  
 <head>  
  <meta charset="UTF-8">  
  <meta name="Generator" content="EditPlus®">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <title>Document</title>  
  <style>  
    canvas{  
        background:#eee;  
    }  
  </style>  
  <script>  
  
    var x = 0; // canvas画布原点x  
    var y = 0; // canvas画布原点y  
    var x_base = x; // 我们要画的波形图的最后一个点的x坐标  
    var y_base = 250; // 我们要画的波形图的最后一个点的y坐标  
    var arrPoint = []; // 用于保存已经波形图的轨迹点  
    var index = 0; // 这个我是用来打日志用的..下面为了看清除了多少次canvas画布  
    var step = 10; // x轴每次走的步长  
    var width=500; // 这个是画布宽度  
    var height=500; // 这个是画图高度  
    (function (){  
        // 首先让我们的函数周期调用  
        var itv = setInterval(function(){  
            // 获取canvas对象和context,并进行一系列初始化  
            var canvas = document.getElementById("canvas");  
            var context = canvas.getContext("2d");  
            context.strokeStyle = "rgb(255,0,0)";  
            context.fileStyle = "rgb(255,0,0)";  
  
            // 画图之前首先清理一下我们的画布,四个参数.  
            // 1.坐标原点x  
            // 2.坐标原点y  
            // 3.要清理的宽度(这里宽度用的x_base是因为canvas画布的原点不断向左移动，变相的等于画布不断变宽  
            //   之所以减一个step是需要看下文,因为在下文中,x_base每一次都会增加一个step,而我们在清理画布的时候,  
            //   我们的画布原点还没有被移动,相当于我们在清除画布时,我们的画布宽度还没有增加,所以要减一个step,当然不减也可以,没事儿)  
            // 4.画布高度  
            context.clearRect(0,0,x_base-step,height);  
            if(x_base > width){  
                console.log("clear" + index);  
                index++;  
                // 画布原点x轴向左移动一个step的位置  
                context.translate(step*-1,0);  
            }  
              
            // 向数组中添加数据,将我们每一次目标到达的终点坐标添加到数组中.这里我设置的条件是,保证数组大小不会超过我的画布宽度除以step个  
            // 目的是针对画布定的,就是每一次我只画画布这么大小的图  
            var obj = {};  
            obj.x = x_base;  
            obj.y = y_base;  
            if(arrPoint.length>(width/step)){  
                arrPoint.splice(0,1);  
                console.log(arrPoint);  
            }  
            arrPoint.push(obj);  
              
            // 开始画了,在画之前先将所有的图形都画出来  
            context.beginPath();  
            for(var i = 0; i < arrPoint.length; i++){  
                context.lineTo(arrPoint[i].x,arrPoint[i].y);  
  
            }  
            // 再一次性将所有图形呈现在html上  
            context.stroke();  
            context.closePath();  
  
            // OK,这时候已经花完了,现在要算一算我们的下一个目标点的坐标了,算完了以后,保存在一个全局变量中  
            // 等待下次再执行画图函数时,将变量添加到数组中,让canvas画图使用  
            x_base += step;  
            y_base = 250 + Math.random()*20;  
        },100)  
    })()  
  
  </script>  
 </head>  
 <body>  
    <canvas id="canvas" width="500" height="500">  
        你这不行啊..不支持canvas  
    </canvas>  
 
<script id="jsbin-source-html" type="text/html"><!doctype html>  
<html lang="en">  
 <head>  
  <meta charset="UTF-8">  
  <meta name="Generator" content="EditPlus®">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <title>Document</title>  
  <style>  
    canvas{  
        background:#eee;  
    }  
  </style>  
  <script>  
  
    var x = 0; // canvas画布原点x  
    var y = 0; // canvas画布原点y  
    var x_base = x; // 我们要画的波形图的最后一个点的x坐标  
    var y_base = 250; // 我们要画的波形图的最后一个点的y坐标  
    var arrPoint = []; // 用于保存已经波形图的轨迹点  
    var index = 0; // 这个我是用来打日志用的..下面为了看清除了多少次canvas画布  
    var step = 10; // x轴每次走的步长  
    var width=500; // 这个是画布宽度  
    var height=500; // 这个是画图高度  
    (function (){  
        // 首先让我们的函数周期调用  
        var itv = setInterval(function(){  
            // 获取canvas对象和context,并进行一系列初始化  
            var canvas = document.getElementById("canvas");  
            var context = canvas.getContext("2d");  
            context.strokeStyle = "rgb(255,0,0)";  
            context.fileStyle = "rgb(255,0,0)";  
  
            // 画图之前首先清理一下我们的画布,四个参数.  
            // 1.坐标原点x  
            // 2.坐标原点y  
            // 3.要清理的宽度(这里宽度用的x_base是因为canvas画布的原点不断向左移动，变相的等于画布不断变宽  
            //   之所以减一个step是需要看下文,因为在下文中,x_base每一次都会增加一个step,而我们在清理画布的时候,  
            //   我们的画布原点还没有被移动,相当于我们在清除画布时,我们的画布宽度还没有增加,所以要减一个step,当然不减也可以,没事儿)  
            // 4.画布高度  
            context.clearRect(0,0,x_base-step,height);  
            if(x_base > width){  
                console.log("clear" + index);  
                index++;  
                // 画布原点x轴向左移动一个step的位置  
                context.translate(step*-1,0);  
            }  
              
            // 向数组中添加数据,将我们每一次目标到达的终点坐标添加到数组中.这里我设置的条件是,保证数组大小不会超过我的画布宽度除以step个  
            // 目的是针对画布定的,就是每一次我只画画布这么大小的图  
            var obj = {};  
            obj.x = x_base;  
            obj.y = y_base;  
            if(arrPoint.length>(width/step)){  
                arrPoint.splice(0,1);  
                console.log(arrPoint);  
            }  
            arrPoint.push(obj);  
              
            // 开始画了,在画之前先将所有的图形都画出来  
            context.beginPath();  
            for(var i = 0; i < arrPoint.length; i++){  
                context.lineTo(arrPoint[i].x,arrPoint[i].y);  
  
            }  
            // 再一次性将所有图形呈现在html上  
            context.stroke();  
            context.closePath();  
  
            // OK,这时候已经花完了,现在要算一算我们的下一个目标点的坐标了,算完了以后,保存在一个全局变量中  
            // 等待下次再执行画图函数时,将变量添加到数组中,让canvas画图使用  
            x_base += step;  
            y_base = 250 + Math.random()*20;  
        },100)  
    })()  
  
  <\/script>  
 </head>  
 <body>  
    <canvas id="canvas" width="500" height="500">  
        你这不行啊..不支持canvas  
    </canvas>  
 </body>  
</html>  </script>

</body>  
</html>