자바 스크립트 캔버스 - 스크롤 막대를 제거하고 싶습니다.

Question

자바 스크립트 캔버스 - x 축 스크롤바를 제거하고 싶습니다.

innerWidth와 관련이 있습니까? 또는 내 장치/브라우저와 관련이 있습니다. MacBook Air를 사용 중이며 Google 크롬을 사용하고 있습니다. body 태그에이 스타일을 추가

var canvas = document.getElementById('sky'); 
var ctx = canvas.getContext('2d') 

var w = window.innerWidth; 
var h = window.innerHeight; 

canvas.width = w; 
canvas.height = h; 

// GENERATE THE stars 

var mf = 10000; //QUANTITY OF stars 
var flakes = []; 

//loop through empty stars and apply attributes('width,height') 

for(var i = 0; i < mf; i++) 
{ 

    flakes.push({ 
     x: Math.random() * w, 
     y: Math.random() * h, 
     r: Math.random() * 2, // radius of each star = min 2px max 7px 
     d: Math.random() + 1// like the weight, how far they would fall 
    }) 

} 

//draw flakes on the canvas 

function drawFlakes() 

{ 
    ctx.clearRect(0, 0, w, h); // clears canvas 
    ctx.fillStyle = "#ffff00"; // fill the canvas or shapes will be white 
    ctx.beginPath(); // about to begin a path or draw shape 
    for(var i = 0; i < mf; i++) // going through each star 
    { 
     var f = flakes[i]; // grabbing fstar 
     ctx.moveTo(f.x, f.y); 
     ctx.arc(f.x, f.y, f.r, 0, Math.PI*1, true); 
    } 
    ctx.fill(); // fills flakes 
    moveFlakes(); 

} 

// animate flakes 

var angle = 0; // controls movement of flakes 

function moveFlakes(){ 
    angle += 0.01; 
    for(var i = 0; i < mf; i++) 
    { 
     //store current flake 
     var f = flakes[i]; 

     //update x any coorodinates of each flake 
     f.y += Math.pow(f.d, 2) + 1; 
     f.x += Math.sin(angle) * 60; 

     //if snows flakes reach bottom, send a new one to the top 

      if(f.y > h) { 
       flakes[i] = { 
        x: Math.random()* w, 
        y: 0, 
        r: f.r, 
        d: f.d 
       } 
      } 
    } 
} 


    setInterval(drawFlakes, 25); 


} 

Answer 1

봅니다 overflow: hidden