이 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;

그럼 당신은 캔버스의 크기를 설정할 수 있습니다 : 나는 또한 테스트

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

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

그래서, 이것은 귀하의 경우 전체 코드가 될 것입니다 이 바이올린에. 링크는 다음과 같습니다. Fiddle

희망이 있습니다. 작동하는지 알려주세요.

출처

2017-04-01 23:19:48

팁 주셔서 감사합니다! 불행히도 내가 시도한 것은 무엇이든, 그냥 빈 검은 화면을 보여주는 끝납니다. 아마 나는 그것을 잘못 구현하고있다. 내가 시도한 것은 "width and height = 500"을 제거하고 var 선언 앞에 코드를 추가 한 것이다. 내가 뭘 놓치고 있니? –

canvas.width = w 및 canvas.height = h는 var canvas = document.getElementById (starfieldCanvasId)를 따라 가야합니다. –

어째서 어떤 이유로 작동하지 않습니다 .. –

이 HTML5 캔버스 스크립트를 전체 화면으로 만드는 방법은 무엇입니까?

답변

관련 문제