如何使用該數據陣列左右移動畫布？

每次畫布移動時使用相同的數據數組，但不是連續的？如何使用該數據陣列左右移動畫布？

如何使用該數據數組從左到右移動畫布線？

如果數據陣列完成使用相同的數據，不斷

這裏是我的代碼：

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

來源

2013-10-10 purBin

不能真正明白你的意思 – Delta

我想搬到波左至右連續同一陣列中的數據？現在它正在反覆 – purBin

有一些問題與您的代碼：

原因您的非 - 動畫循環結束時的連續延遲...

你的數組有140個元素，但你的代碼試圖繪製200個元素。延遲是你的代碼試圖繪製（200-140）不存在的數組元素。

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

使用setTimeout以1000的fps間隔是不可實現的（60fps是實際最大值）。

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

你每次增加n 1.5。這會跳過你的一些數據元素。如果這不是你的意圖，而不是你應該1.

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

增加n您正在清空畫布和重繪完全在每個動畫循環的浪潮。這是有效的，但是保持你以前的畫布，並添加額外的線來繪製你的下一個[x，y]。只有在繪製完所有數據點後才能清除。

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

這裏是一個小提琴：http://jsfiddle.net/m1erickson/vPXkm/

[加法基於OP的新信息]

您的進一步澄清後，我能明白你的願望

我想你想要一個波形從畫布的左邊部分產生新的圖形，並使用anim將現有數據推向右邊通貨膨脹。畢竟x，y是從你的數據[]源繪製的，你想要在數據[]開頭重複繪製。

因此，這裏是如何做到這一點：

調整畫布將數據[]的寬度的兩倍。
在畫布上繪製兩次數據。（數據[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>

來源

2013-10-10 15:51:55 markE

謝謝馬克。但我想移動那波不重複那波..總是使用相同的數據前進... – purBin

請好解釋 - 非常非常，很難理解你需要什麼！你是否希望這個波動畫，但總是讓波前沒有離開畫布的右側？如果我不明白，請解釋... – markE

我的意思是：例如http://bl.ocks.org/enjalot/1457934像這樣使用數據陣列 – purBin

如何使用該數據陣列左右移動畫布？

回答

相關問題