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

  • Z时代
  • 2024-01-10
  • 分类：问答

免责声明：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>

回答：

添加功能

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;  
    // ....

所以最终版本是这样的

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

以上是 自动调整大小画布到浏览器宽度和高度 的全部内容， 来源链接： utcz.com/qa/259320.html

回到顶部