HTML Canvas Animation Space Ship alpha fade in

Description

HTML Canvas Animation Space Ship alpha fade in

View in separate window 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

</head>/*  ww  w .j  a v  a2  s .c  om*/
<body>
<canvas id="canvas" width="200" height="200">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');
  //canvasApp level variables
  let x=50;
  let y=50;
  let width=20;
  let height=20;
  let alpha=0;
  context.globalAlpha = 1;

  function drawScreen() {
  
    context.globalAlpha = 1;
  
    context.fillStyle = '#000000';
      context.fillRect(0, 0, 200, 200);
    context.fillStyle    = '#ffffff';
    context.font         = '20px sans-serif';
    context.textBaseline = 'top';
    context.fillText  ("Player Ship - alpha", 0, 180);
  
  
    context.globalAlpha = alpha;
    
    
    context.save(); //save current state in stack 
    context.setTransform(1,0,0,1,0,0); // reset to identity
    
    //translate the canvas origin to the center of the player
    context.translate(x+.5*width,y+.5*height);

    
    //drawShip
    
    context.strokeStyle = '#ffffff';
    context.beginPath();
    
    //hard coding in locations
    context.moveTo(5,-5); 
    context.lineTo(14,14);
    context.lineTo(5,4);
    context.moveTo(4,4); 
    context.lineTo(-5,14);
    context.lineTo(4,-5);
    
    
    
    context.stroke();
    context.closePath();
    
    //restore context
    context.restore(); //pop old state on to screen
    
    //add to rotation
    alpha+=.01;
    if (alpha > 1) {
    alpha=0;
    }
    

  }
  
  const FRAME_RATE=40;
  let intervalTime=1000/FRAME_RATE;
  gameLoop();
  
  function gameLoop() {
    drawScreen();
    window.setTimeout(gameLoop, intervalTime);
  }



</script> 
</body>
</html>



PreviousNext

Related