0

こんにちは、JavaScript でボールを作成しようとしています。このボールは、ボールが通過するときにグラデーションを使用して背景を作成します。背景を次のように塗りつぶそうとすると、ボールの跳ね返りのコードがうまくいくようです。

 context.fillStyle = "rgba(0,0,0,0.10)"; //this is what i am trying to do as the                 gradient
      context.fillRect(0,0, canvas.width, canvas.height);

私がすべてを台無しにしたときです。何が間違っているのかわかりません。親切に助けていただければ幸いです。以下は、跳ねるボールに対して私が取ったアプローチです。 

 <script>
     var context;
     var posX=100;
     var posY=200;
      var dx=5;
      var dy=5;



    function bouncyBall()
    {
    var canvas = document.getElementById("circleCanvas");
    context= canvas.getContext('2d');
     setInterval(draw,10);



      }

      function draw()
     {


    context.clearRect(0,0, 800,600);
    context.beginPath();
    context.fillStyle="orange";



    //to draw the circle
    context.arc(posX,posY,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();


    // this will do the boundares
   if( posX<0 || posX>800) dx=-dx; 
    if( posY<0 || posY>600) dy=-dy; 
   posX = posX+dx; 
   posY = posY+dy;


   }


      </script>
   <body  onload= "bouncyBall();" >
    <h1>A Ball Bouncing!</h1>
     <canvas id = "circleCanvas" width="800" height="600">


     </canvas>
       <ul>

        </ul>
           </body>
</html>
4

1 に答える 1

1

ボール キャンバスで使用する線形グラデーションを作成する方法は次のとおりです。

// think of createLinearGradient as a line
// the gradient will follow that line

var orangeGradient = context.createLinearGradient(
                         canvas.width/2, 0, canvas.width/2, canvas.height);

// then define where each color will be along the line 
// (0.00==start of line,1.00==end of line)

orangeGradient.addColorStop(0, '#ffdd00');   
orangeGradient.addColorStop(1, '#cc6600');

// and finally set the fillStyle to your new gradient

context.fillStyle = orangeGradient;
context.fill();
于 2013-10-24T14:25:24.283 に答える