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

我想使此画布动态适合视口的全宽和高度，而不在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>

来源

2017-12-03 spencespencespence

添加功能

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>

来源

2017-12-03 03:28:08 leoinfo

辉煌，谢谢大家！ – spencespencespence

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

回答

相关问题