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;



  }

}
};

あなたの答えをありがとう、私は私の間違いを見つけることができません、私はCRAZYになります!

4

1 に答える 1

2

背景キャンバスの上にある透明な背景を持つ別のキャンバスに波を配置することをお勧めします。draw次に、各呼び出しの開始時にキャンバス (または波がレンダリングされる領域) をクリアします。そうすれば、背景を再レンダリングする必要もありません。

そのためには、CSS を使用してキャンバスを互いの上に配置します。また、他のキャンバスに別の id を付け<canvas id="vagueCanvas"></canvas>て、同じ方法でコンテキストを選択することもできますvar vagueContext = document.getElementById( 'vagueCanvas' ).getContext( '2d' );。

于 2013-10-27T14:15:49.503 に答える