自动调整画布大小以适应浏览器的宽度和高度

Question

Disclaimer: very new to Javascript. 免责声明：JavaScript的新手。

I'd like to make this canvas dynamically fit full width and height of the viewport, without the scaling present in CSS width/height declaration. 我想使此画布动态适合视口的整个宽度和高度，而CSS宽度/高度声明中没有缩放比例。

The original code can be found at Starfield animation done in HTML 5 . 原始代码可以在用HTML 5完成的Starfield动画中找到。

After quite a few different attempts to affect this with the assistance of a number of stack answers, I've been unable to get the syntax right. 在通过许多堆栈答案的帮助进行了许多不同的尝试后，我一直无法正确理解语法。 Each different attempt breaks the rendering. 每种不同的尝试都会中断渲染。

How can I go about this with such a complex function? 如此复杂的功能该如何解决呢？

 <!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

Add a function 添加功能

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);
}

Then add it at the top of the window.onload 然后将其添加到窗口的顶部。

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

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

    // ....

So the final version would look like this 所以最终版本看起来像这样

 <!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>

: ：

<!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 个解决方案

解决方案1
0 已采纳 2017-12-03 03:28:08

自动调整画布大小以适应浏览器的宽度和高度

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-12-03 03:28:08

解决方案1
0 已采纳 2017-12-03 03:28:08