调整大小的浏览器窗口填充画布动态

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>