HTML5画布100％宽度视口高度？

为了始终使画布全屏显示宽度和高度，这意味着即使调整了浏览器的大小，也需要在将画布调整为window.innerHeight和window.innerWidth的函数中运行绘制循环。

HTML

<canvas id="canvas"></canvas>

Javascript

(function() {    var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');    // resize the canvas to fill browser window dynamically    window.addEventListener('resize', resizeCanvas, false);    function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight;  drawStuff();     }    resizeCanvas();    function drawStuff() { // do your drawing stuff here    }})();

CSS

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

这样可以正确地使画布达到浏览器的整个宽度和高度。您只需要在drawStuff（）函数中将所有用于绘制的代码放到画布上即可。