0

我是法国程序员，请原谅我的英语：

我用波浪制作画布，但找不到必须清除画布以获得良好视觉效果的地方，这是我的代码：

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;



  }

}
};

感谢您的回答我找不到我的错误，我变得疯狂！

4

1 回答 1

2

我的建议是将您的波浪放在背景画布顶部的具有透明背景的不同画布上。然后，您只需在每次draw调用开始时清除画布（或渲染波浪的区域）。这样，您也不需要重新渲染任何背景。

为此，您将使用 CSS 将画布放在彼此的顶部。您也只需给另一个画布一个不同的 id，就像<canvas id="vagueCanvas"></canvas>并以相同的方式选择上下文var vagueContext = document.getElementById( 'vagueCanvas' ).getContext( '2d' );。

于 2013-10-27T14:15:49.503 回答