html5 网页宽度100,HTML5 Canvas 100％视口宽度？

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

HTML

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;

/**

* Your drawings need to be inside this function otherwise they will be reset when

* you resize the browser window and the canvas goes will be cleared.

*/

drawStuff();

}

resizeCanvas();

function drawStuff() {

// do your drawing stuff here

}})();

CSS* { margin:0; padding:0; } /* to remove the top and left whitespace */html, body { width:100%; height:100%; } /* just to be sure these are full screen*/canvas { display:block; } /* To remove the scrollbars */

这就是你如何正确地使画布的全宽和高度的浏览器。您只需将绘制的所有代码放入drawStuff()函数中的画布。