下面的解决方案对我来说效果最好。因为我对编码相对陌生，所以我喜欢用视觉来确认某些东西是否按照我期望的方式工作。我在以下地点找到了它: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

代码如下:

(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(); } })(); html, body { width: 100%; height: 100%; margin: 0px; border: 0; overflow: hidden; /* Disable scrollbars */ display: block; /* No floating content on sides */ } <canvas id='c' style='position:absolute; left:0px; top:0px;'></canvas>

蓝色边框显示了调整画布的边缘，并且总是沿着窗口的边缘，在所有4个面都可见，这不是上述其他一些答案的情况。希望能有所帮助。

(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();
    });

}());

一个最小的设置

HTML

<canvas></canvas>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
}

JavaScript

const canvas = document.querySelector('canvas');

const resizeObserver = new ResizeObserver(() => {
  canvas.width = Math.round(canvas.clientWidth * devicePixelRatio);
  canvas.height = Math.round(canvas.clientHeight * devicePixelRatio);
});

resizeObserver.observe(canvas);

对于 WebGL

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

const resizeObserver = new ResizeObserver(() => {
  canvas.width = Math.round(canvas.clientWidth * devicePixelRatio);
  canvas.height = Math.round(canvas.clientHeight * devicePixelRatio);
  gl.viewport(0, 0, canvas.width, canvas.height);
});

resizeObserver.observe(canvas);

注意，我们应该考虑到设备像素比，特别是对于HD-DPI显示。

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

根据浏览器客户机的尺寸设置画布坐标空间的宽度和高度需要您在浏览器调整大小时重新调整大小和绘制。

一个不那么复杂的解决方案是在Javascript变量中维护可绘制的尺寸，但根据屏幕设置画布尺寸。宽度、屏幕。高度尺寸。使用CSS来适应:

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
} 

浏览器窗口通常不会比屏幕本身大(除非屏幕分辨率被误报，因为它可能是不匹配的双显示器)，所以背景不会显示，像素比例也不会变化。画布像素将与屏幕分辨率成正比，除非你使用CSS缩放画布。

function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

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