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

PIPIONE

为了使画布全屏宽度和高度始终如此，即使在调整浏览器大小时，也需要在将画布大小调整为window.innerHeight和window.innerWidth的函数中运行绘制循环。示例：http：//jsfiddle.net/jaredwilli/qFuDr/HTMLJavaScript的(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()函数中的画布。