Question

免责声明：非常新的Javascript。

我想让这个画布动态地适应视口的整个宽度和高度，而CSS宽度/高度声明中没有缩放。

原始代码可在Starfield animation done in HTML 5 找到。

经过多次不同的尝试，在一些堆栈答案的帮助下影响了这一点，我一直无法正确理解语法。每次不同的尝试都会破坏渲染。

如何通过如此复杂的功能解决这个问题？

<!DOCTYPE html>
<html>
<head>
    <title>Starfield Effect</title>


     <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0;
            overflow: hidden; 
            display: block;  
            background:#000;
        }
    </style>

    <script>
        
        window.onload = function() {

            var starfieldCanvasId     = "starfieldCanvas", 
                framerate             = 60,                
                numberOfStarsModifier = 1.0,               
                flightSpeed           = 0.02;              

            var canvas        = document.getElementById(starfieldCanvasId),
                context       = canvas.getContext("2d"),
                width         = canvas.width,
                height        = canvas.height,
                numberOfStars = width * height / 1000 * numberOfStarsModifier,
                dirX          = width / 2,
                dirY          = height / 2,
                stars         = [],
                TWO_PI        = Math.PI * 2;


            for(var x = 0; x < numberOfStars; x++) {
                stars[x] = {
                    x: range(0, width),
                    y: range(0, height),
                    size: range(0, 1)
                };
            }

            canvas.onmousemove = function(event) {
                dirX = event.offsetX,
                dirY = event.offsetY;
            }

            window.setInterval(tick, Math.floor(1000 / framerate));

            function tick() {
                var oldX,
                    oldY;

                // reset canvas for next frame
                context.clearRect(0, 0, width, height);

                for(var x = 0; x < numberOfStars; x++) {
                    // save old status
                    oldX = stars[x].x;
                    oldY = stars[x].y;


                    stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
                    stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
                    stars[x].size += flightSpeed;


                    if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
                        stars[x] = {
                            x: range(0, width),
                            y: range(0, height),
                            size: 0
                        };
                    }


                    context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
                    context.lineWidth = stars[x].size;
                    context.beginPath();
                    context.moveTo(oldX, oldY);
                    context.lineTo(stars[x].x, stars[x].y);
                    context.stroke();
                }
            }

            function range(start, end) {
                return Math.random() * (end - start) + start;
            }

        };
    </script>


</head>

<body>

    <canvas id="starfieldCanvas"></canvas>

</body>

</html>

Answer 1

添加功能

function TakeWholePageScreen() {

    var myWidth = 0, myHeight = 0;

    // source:  http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
      } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
      } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
      }   

      var starfieldCanvas = document.getElementById('starfieldCanvas');
      starfieldCanvas.setAttribute('width',myWidth-20);
      starfieldCanvas.setAttribute('height',myHeight-20);
}

然后将其添加到window.onload

的顶部

window.onload = function() {
    TakeWholePageScreen();

    var starfieldCanvasId     = "starfieldCanvas", 
                framerate             = 60,                
                numberOfStarsModifier = 1.0,               
                flightSpeed           = 0.02;     

    // ....

所以最终版本看起来像这样

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Starfield Effect</title>


   <style>
      html, body {
          width: 100%;
          height: 100%;
          margin: 0px;
          border: 0;
          overflow: hidden; 
          display: block;  
          background:#000;
      }
  </style>

  <script>
      
          
    function TakeWholePageScreen() {

      var myWidth = 0, myHeight = 0;
      // source:  http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
      if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
      } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
      } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
      }   
     
      var starfieldCanvas = document.getElementById('starfieldCanvas');
      starfieldCanvas.setAttribute('width',myWidth-20);
      starfieldCanvas.setAttribute('height',myHeight-20);
    }
        
        
    window.onload = function() {

      
      TakeWholePageScreen();

      var starfieldCanvasId     = "starfieldCanvas", 
          framerate             = 60,                
          numberOfStarsModifier = 1.0,               
          flightSpeed           = 0.02;              

      var canvas        = document.getElementById(starfieldCanvasId),
          context       = canvas.getContext("2d"),
          width         = canvas.width,
          height        = canvas.height,
          numberOfStars = width * height / 1000 * numberOfStarsModifier,
          dirX          = width / 2,
          dirY          = height / 2,
          stars         = [],
          TWO_PI        = Math.PI * 2;


      for(var x = 0; x < numberOfStars; x++) {
        stars[x] = {
            x: range(0, width),
            y: range(0, height),
            size: range(0, 1)
        };
      }

      canvas.onmousemove = function(event) {
        dirX = event.offsetX,
        dirY = event.offsetY;
      }

      window.setInterval(tick, Math.floor(1000 / framerate));

      function tick() {
        var oldX,
            oldY;

        // reset canvas for next frame
        context.clearRect(0, 0, width, height);

        for(var x = 0; x < numberOfStars; x++) {
          // save old status
          oldX = stars[x].x;
          oldY = stars[x].y;


          stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
          stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
          stars[x].size += flightSpeed;


          if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
              stars[x] = {
                  x: range(0, width),
                  y: range(0, height),
                  size: 0
              };
          }


          context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
          context.lineWidth = stars[x].size;
          context.beginPath();
          context.moveTo(oldX, oldY);
          context.lineTo(stars[x].x, stars[x].y);
          context.stroke();
        }
      }

      function range(start, end) {
        return Math.random() * (end - start) + start;
      }

    };
  </script>


</head>

<body>

    <canvas id="starfieldCanvas"></canvas>

</body>

</html>

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <title>Starfield Effect</title>


   <style>
      html, body {
          width: 100%;
          height: 100%;
          margin: 0px;
          border: 0;
          overflow: hidden; 
          display: block;  
          background:#000;
      }
  </style>

  <script>


    function TakeWholePageScreen() {

      var myWidth = 0, myHeight = 0;
      // source:  http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
      if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
      } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
      } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
      }   

      var starfieldCanvas = document.getElementById('starfieldCanvas');
      starfieldCanvas.setAttribute('width',myWidth-20);
      starfieldCanvas.setAttribute('height',myHeight-20);
    }


    window.onload = function() {


      TakeWholePageScreen();

      var starfieldCanvasId     = "starfieldCanvas", 
          framerate             = 60,                
          numberOfStarsModifier = 1.0,               
          flightSpeed           = 0.02;              

      var canvas        = document.getElementById(starfieldCanvasId),
          context       = canvas.getContext("2d"),
          width         = canvas.width,
          height        = canvas.height,
          numberOfStars = width * height / 1000 * numberOfStarsModifier,
          dirX          = width / 2,
          dirY          = height / 2,
          stars         = [],
          TWO_PI        = Math.PI * 2;


      for(var x = 0; x < numberOfStars; x++) {
        stars[x] = {
            x: range(0, width),
            y: range(0, height),
            size: range(0, 1)
        };
      }

      canvas.onmousemove = function(event) {
        dirX = event.offsetX,
        dirY = event.offsetY;
      }

      window.setInterval(tick, Math.floor(1000 / framerate));

      function tick() {
        var oldX,
            oldY;

        // reset canvas for next frame
        context.clearRect(0, 0, width, height);

        for(var x = 0; x < numberOfStars; x++) {
          // save old status
          oldX = stars[x].x;
          oldY = stars[x].y;


          stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed;
          stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed;
          stars[x].size += flightSpeed;


          if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
              stars[x] = {
                  x: range(0, width),
                  y: range(0, height),
                  size: 0
              };
          }


          context.strokeStyle = "rgba(255, 255, 255, " + Math.min(stars[x].size, 1) + ")";
          context.lineWidth = stars[x].size;
          context.beginPath();
          context.moveTo(oldX, oldY);
          context.lineTo(stars[x].x, stars[x].y);
          context.stroke();
        }
      }

      function range(start, end) {
        return Math.random() * (end - start) + start;
      }

    };
  </script>


</head>

<body>

    <canvas id="starfieldCanvas"></canvas>

</body>

</html>

自动调整画布到浏览器的宽度和宽度高度

1 个答案: