帆布 - 貝塞爾重複

Question

我是一個法國的程序員，所以請原諒我的英語：

我做一個帆布帶波和我找不到在哪裏，我必須清楚我的良好視覺效果的畫布，這是我的代碼：

window.onload = function() 
{ 
    var canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'); 









if (canvas.getContext) 

     // If you have it, create a canvas user inteface element. 
     { 


      // Paint it black. 
      context.fillStyle = "black"; 
      context.rect(0, 0, 1000, 1000); 
      context.fill(); 

      // Paint the starfield. 


      vague(); 
      stars(); 
      decor(); 
     } 

function stars() { 

     // Draw 50 stars. 
     for (i = 0; i <= 70; i++) { 
      // Get random positions for stars. 
      var x = Math.floor(Math.random() * 800) 
      var y = Math.floor(Math.random() * 400) 

      // Make the stars white 
      context.fillStyle = "white"; 
      context.shadowColor = 'white'; 
      context.shadowBlur = 50; 

      // Give the ship some room. 
      if (x < 0 || y < 0) context.fillStyle = "black"; 

      // Draw an individual star. 
      context.beginPath(); 
      context.arc(x, y, 3, 0, Math.PI * 2, true); 
      context.closePath(); 
      context.fill(); 

     } 
     } 

function decor() { 



       context.beginPath(); 
       context.shadowColor = 'white'; 
     context.shadowBlur = 30; 
     context.fillStyle = 'skyblue'; 
     context.fillRect(0,400,1000,200); 
     context.closePath(); 
     context.fill(); 


     context.beginPath(); 
     context.fillStyle = 'white'; 
     context.shadowColor = 'white'; 
     context.shadowBlur = 1500; 
     context.shadowOffsetX = -300; 
     context.shadowOffsetY = 400; 
     context.arc(680,110,100,Math.PI*2,false); 
     context.closePath(); 
     context.fill(); 

} 


function vague(){ 

    draw(-120,50); 
    var i = 0; 

    function draw(x,y){ 



      for (var i = 0; i <= 20; i++) { 


      var x = x+50; 
      var y = y; 



      context.fillStyle = 'rgba(0,0,100,0.4)'; 
      context.beginPath(); 
      context.moveTo(72+x, 356+y); // Tracer autre une ligne (théorique) 
      context.strokeStyle = 'skyblue'; 
      context.lineWidth=3; 
      context.bezierCurveTo(60+x, 360+y , 92+x , 332+y , 104+x , 323+y); 
      context.bezierCurveTo(114+x, 316+y , 128+x , 304+y , 140+x , 325+y); 
      context.bezierCurveTo(148+x, 339+y , 127+x, 307+y , 115+x , 337+y); 
      context.bezierCurveTo(109+x, 352+y , 159+x , 357+y , 144+x , 357+y); 
      context.bezierCurveTo(129+x, 357+y , 87+x , 356+y , 72+x , 356+y); 
      context.fill(); 
      context.stroke(); 


       if (x>=800){ 
        x=-120; 

       } 

      } 

     setInterval(function() { draw(x,y) }, 50); 
     x = x+20; 



    } 

} 
}; 

感謝您的回答我找不到我的錯誤，我變得瘋狂！

Answer 1

我的建議是將您的海浪放在背景畫布頂部透明背景的不同畫布上。然後，您只需在每個draw調用的開始處清除畫布（或渲染波浪的區域）。這樣，你不需要重新渲染任何背景。

爲了做到這一點，你會use CSS to place the canvases on top of each other。你也可以給其他畫布一個不同的ID，如<canvas id="vagueCanvas"></canvas>，並以相同的方式選擇上下文var vagueContext = document.getElementById('vagueCanvas').getContext('2d');。