Canvas - bezier重复

Question

我是一个法语程序员，所以请原谅我的英语：

我用wave做了一个画布，但是我找不到我必须在哪里清理画布才能获得良好的视觉效果，这是我的代码：

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

我的建议是将你的wave放在不同的画布上，在你的背景画布上有一个透明的背景。然后，您只需在每次draw调用开始时清除画布(或渲染波浪的区域)。这样，你就不需要重新渲染任何背景了。

为了做到这一点，你需要使用use CSS to place the canvases on top of each other。您还可以给另一个画布一个不同的id，如<canvas id="vagueCanvas"></canvas>，并以相同的var vagueContext = document.getElementById( 'vagueCanvas' ).getContext( '2d' );方式选择上下文。