html设置窗口最小大小,调整HTML 5画布的大小以适应窗口

下面的解决方案对我来说是最好的。因为我对编码还比较陌生，所以我喜欢用视觉来确认某些东西正在以我预期的方式工作。我在以下地点找到了它：http：/htmlcheats.com/html/resize-the-html 5-画布-dyamally/

下面是代码：html>

Resize HTML5 canvas dynamically | www.htmlcheats.com

html, body {

width: 100%;

height: 100%;

margin: 0px;

border: 0;

overflow: hidden; /*  Disable scrollbars */

display: block;  /* No floating content on sides */

}

(function() {

var

// Obtain a reference to the canvas element using its id.

htmlCanvas = document.getElementById('c'),

// Obtain a graphics context on the canvas element for drawing.

context = htmlCanvas.getContext('2d');

// Start listening to resize events and draw canvas.

initialize();

function initialize() {

// Register an event listener to call the resizeCanvas() function

// each time the window is resized.

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

// Draw canvas border for the first time.

resizeCanvas();

}

// Display custom canvas. In this case it's a blue, 5 pixel

// border that resizes along with the browser window.

function redraw() {

context.strokeStyle = 'blue';

context.lineWidth = '5';

context.strokeRect(0, 0, window.innerWidth, window.innerHeight);

}

// Runs each time the DOM window resize event fires.

// Resets the canvas dimensions to match window,

// then draws the new borders accordingly.

function resizeCanvas() {

htmlCanvas.width = window.innerWidth;

htmlCanvas.height = window.innerHeight;

redraw();

}

})();