HTML Canvas Animation fade in

Description

HTML Canvas Animation fade in

View in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="canvasOne" width="640" height="480" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    let theCanvas = document.getElementById("canvasOne");
    let context = theCanvas.getContext("2d"); 
    //from   w w  w  . j  a  va  2  s  . c o m
      function drawScreen() {
      //background
      context.globalAlpha = 1;
      context.fillStyle = "#000000";
        context.fillRect(0, 0, 640, 480);
      //image
      context.globalAlpha = .25;
      context.drawImage(helloWorldImage, 0, 0);
      //text
      context.font         = "72px Sans-Serif";
      context.textBaseline = "top";
      
      if (fadeIn) {
        alpha += .01;
        if (alpha >= 1)  {
          alpha = 1;
          fadeIn = false;  
        }
      } else {
        alpha -= .01;
        if (alpha < 0)  {
          alpha = 0;
          fadeIn = true;  
        }
      }
      
      context.globalAlpha = alpha;
      context.fillStyle    = "#FFFFFF";
      context.fillText  (text, 150,200);
      
    }
    
    let text = "Hello World";
    let alpha = 0;
    let fadeIn = true;
    //image
    let helloWorldImage = new Image();
    helloWorldImage.src = "image1.png";
    //box
    function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()  
    }
    
    gameLoop();

</script>

</body>
</html>



PreviousNext

Related