如何使此HTML5畫布腳本全屏？

我在嘗試設置畫布以填充整個窗口時遇到問題。它目前設置爲500x500 ..我是編碼新手，非常感謝您的幫助！謝謝。如何使此HTML5畫布腳本全屏？

下面是代碼：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Starfield effect done in HTML 5</title> 
 
    <script> 
 
     window.onload = function() { 
 

 
      /* --- config start --- */ 
 

 
      var starfieldCanvasId  = "starfieldCanvas", // id of the canvas to use 
 
       framerate    = 60,    // frames per second this animation runs at (this is not exact) 
 
       numberOfStarsModifier = 0.15,    // Number of stars, higher numbers have performance impact 
 
       flightSpeed   = 0.003;    // speed of the flight, the higher this number the faster 
 

 
      /* ---- config end ---- */ 
 

 
      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; 
 

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

 
      // when mouse moves over canvas change middle point of animation 
 
      canvas.onmousemove = function(event) { 
 
       dirX = event.offsetX, 
 
       dirY = event.offsetY; 
 
      } 
 

 
      // start tick at specified fps 
 
      window.setInterval(tick, Math.floor(1000/framerate)); 
 

 
      // main routine 
 
      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; 
 

 
        // calculate changes to star 
 
        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 star is out of bounds, reset 
 
        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 
 
         }; 
 
        } 
 

 
        // draw star 
 
        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(); 
 
       } 
 
      } 
 

 
      // get a random number inside a range 
 
      function range(start, end) { 
 
       return Math.random() * (end - start) + start; 
 
      } 
 
     }; 
 
    </script> 
 
</head> 
 
<body style="background:#000;"> 
 
    <canvas width="500" height="500" id="starfieldCanvas"></canvas> 
 
</body> 
 
</html>

原代碼和信貸：https://www.timewasters-place.com/starfield-animation-done-in-html-5/

來源

2017-04-01 Ethan Banks

我假設你的意思是你希望你的腳本來自動確定屏幕尺寸和然後將畫布設置爲全屏，而不是當前硬編碼的500 x 500。

您可以使用以下方法以編程方式確定視口大小，其中寬度和高度分別如下。 (Source)：

var width = window.innerWidth 
|| document.documentElement.clientWidth 
|| document.body.clientWidth; 

var height = window.innerHeight 
|| document.documentElement.clientHeight 
|| document.body.clientHeight;

然後你可以設置你的畫布的尺寸如下：

canvas.width = width; 
canvas.height = height;

所以，這將是你的情況的完整代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Starfield effect done in HTML 5</title> 
    <script> 
     window.onload = function() { 

      /* --- config start --- */ 

      var starfieldCanvasId  = "starfieldCanvas", // id of the canvas to use 
       framerate    = 60,    // frames per second this animation runs at (this is not exact) 
       numberOfStarsModifier = 0.15,    // Number of stars, higher numbers have performance impact 
       flightSpeed   = 0.003;    // speed of the flight, the higher this number the faster 

      var width = window.innerWidth 
      || document.documentElement.clientWidth 
      || document.body.clientWidth; 

      var height = window.innerHeight 
      || document.documentElement.clientHeight 
      || document.body.clientHeight; 

      /* ---- config end ---- */ 

      var canvas  = document.getElementById(starfieldCanvasId), 
       context  = canvas.getContext("2d"), 
       stars   = [], 
       TWO_PI  = Math.PI * 2; 

       canvas.width = width; 
       canvas.height = height; 

       numberOfStars = width * height/1000 * numberOfStarsModifier; 
       dirX   = width/2; 
       dirY   = height/2; 

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

      // when mouse moves over canvas change middle point of animation 
      canvas.onmousemove = function(event) { 
       dirX = event.offsetX, 
       dirY = event.offsetY; 
      } 

      // start tick at specified fps 
      window.setInterval(tick, Math.floor(1000/framerate)); 

      // main routine 
      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; 

        // calculate changes to star 
        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 star is out of bounds, reset 
        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 
         }; 
        } 

        // draw star 
        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(); 
       } 
      } 

      // get a random number inside a range 
      function range(start, end) { 
       return Math.random() * (end - start) + start; 
      } 
     }; 
    </script> 
</head> 
<body style="background:#000;"> 
    <canvas id="starfieldCanvas"></canvas> 
</body> 
</html>

我還測試這在小提琴上。這裏是鏈接：Fiddle

希望這有助於！讓我知道它是否有效。

來源

2017-04-01 23:19:48

感謝您的提示！不幸的是，無論我嘗試什麼，它只是最終呈現給我一個空白的黑屏。也許我正在實現它錯誤..我試圖刪除「寬度和高度= 500」，並添加代碼前的var聲明。我錯過了什麼？ –

canvas.width = w和canvas.height = h將需要在var canvas = document.getElementById（starfieldCanvasId） –

之後去，因爲某些原因沒有任何作用。 –

如何使此HTML5畫布腳本全屏？

回答

相關問題