調整大小的瀏覽器窗口填充畫布動態

Question

當改變窗口大小不會填補畫布梯度...

window.addEventListener('resize', resizeCanvas, false); 
function resizeCanvas() { 

      canvas.width = window.innerWidth; 
       canvas.height = window.innerHeight; 
      draw(); 

    } 
    resizeCanvas(); 

http://codepen.io/tworog/pen/jVoYrz

請幫助。

Answer 1

畫布大小已經被更新。

爲了擺脫漸變，您需要更改第48行，以便矩形的大小與畫布匹配。

ctx.fillRect(0,0,canvas.width,canvas.height); 

Answer 2

你不需要javascript來完成這個，你可以使用CSS。 （我做了下面的例子畫布藍色，證明它的填充整頁）

canvas { 
 
    background: cornflowerblue; 
 
} 
 

 
html, body, canvas { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<canvas></canvas>