CSS

body { margin: 0; } 
canvas { display: block; } 

JavaScript

window.addEventListener("load", function()
{
    var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
    var context = canvas.getContext('2d');

    function draw()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); 
        context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height); 
        context.stroke();
    }
    function resize()
    {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        draw();
    }
    window.addEventListener("resize", resize);
    resize();
});

如果你对保留纵横比感兴趣，并在纯CSS中这样做(给定纵横比)，你可以像下面这样做。关键字是::content元素上的padding-bottom，用于调整容器元素的大小。这是相对于它的父类宽度的大小，默认为100%。此处指定的比率必须与canvas元素上的大小比率相匹配。

// Javascript var canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); context.fillStyle = '#ff0000'; context.fillRect(500, 200, 200, 200); context.fillStyle = '#000000'; context.font = '30px serif'; context.fillText('This is some text that should not be distorted, just scaled', 10, 40); /*CSS*/ .container { position: relative; background-color: green; } .container::after { content: ' '; display: block; padding: 0 0 50%; } .wrapper { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } canvas { width: 100%; height: 100%; } <!-- HTML --> <div class=container> <div class=wrapper> <canvas width=1200 height=600></canvas> </div> </div>

我认为这正是我们应该做的:http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

function resizeGame() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }

    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';

    var gameCanvas = document.getElementById('gameCanvas');
    gameCanvas.width = newWidth;
    gameCanvas.height = newHeight;
}

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);

如果你的div完全填满了网页，那么你可以填充这个div，这样就有一个画布来填充这个div。

你可能会发现这很有趣，因为你可能需要使用css来使用百分比，但是，这取决于你使用的浏览器，以及它在多大程度上符合规范: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

画布的内在尺寸 元素的大小相等 用数字来坐标空间 用CSS像素解释。然而, 元素的大小可以任意设置 通过样式表。在呈现期间, 图像按比例缩放以适应此布局 大小。

您可能需要获取div的offsetWidth和height，或者获取窗口的高度/宽度并将其设置为像素值。

(function() {

    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width:  window.innerWidth
        };
    };

    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        $('#myCanvas').width(viewportSize.width).height(viewportSize.height);
        $('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
    };

    // run on load
    updateSizes();

    // handle window resizing
    $(window).on('resize', function() {
        updateSizes();
    });

}());

除非你想让画布自动提升你的图像数据(这就是James Black的答案，但它看起来不漂亮)，你必须自己调整它的大小并重新绘制图像。画布居中