我使用的是sketch.js，所以在我为画布运行init命令后，我用jquery改变宽度和高度。它将维度基于父元素。

$ (' # DrawCanvas ') .sketch () .attr(“高度”,$ (' # DrawCanvas ') .parent () .height ()) .attr(“宽度”,$ (' # DrawCanvas ') .parent () .width ());

这对我很管用。 伪代码:

// screen width and height
scr = {w:document.documentElement.clientWidth,h:document.documentElement.clientHeight}
canvas.width = scr.w
canvas.height = scr.h

另外，就像devyn说的，您可以替换“document.documentElement”。宽度和高度均为“inner”的客户端:

**document.documentElement.client**Width
**inner**Width
**document.documentElement.client**Height
**inner**Height

它仍然有效。

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

我认为这正是我们应该做的: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);

下面是一个小而完整的代码片段，它结合了所有的答案。按:“运行代码片段”，然后按“完整页面”，调整窗口大小，以查看其运行情况:

function refresh(referenceWidth, referenceHeight, drawFunction) { const myCanvas = document.getElementById("myCanvas"); myCanvas.width = myCanvas.clientWidth; myCanvas.height = myCanvas.clientHeight; const ratio = Math.min( myCanvas.width / referenceWidth, myCanvas.height / referenceHeight ); const ctx = myCanvas.getContext("2d"); ctx.scale(ratio, ratio); drawFunction(ctx, ratio); window.requestAnimationFrame(() => { refresh(referenceWidth, referenceHeight, drawFunction); }); } //100, 100 is the "reference" size. Choose whatever you want. refresh(100, 100, (ctx, ratio) => { //Custom drawing code! Draw whatever you want here. const referenceLineWidth = 1; ctx.lineWidth = referenceLineWidth / ratio; ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.arc(50, 50, 49, 0, 2 * Math.PI); ctx.stroke(); }); div { width: 90vw; height: 90vh; } canvas { width: 100%; height: 100%; object-fit: contain; } <div> <canvas id="myCanvas"></canvas> </div>

这个片段使用画布。clientWidth和canvas。clientHeight而不是window。innerWidth和window。innerHeight使代码段在复杂布局中正确运行。然而，如果你只是把它放在一个使用全窗口的div中，它也适用于全窗口。这样更灵活。

代码片段使用了新窗口。请求animationframe重复调整画布的大小每帧。如果不能使用此方法，请使用setTimeout代替。而且，这是低效的。为了提高效率，存储clientWidth和clienttheight，只有当clientWidth和clienttheight改变时才重新计算和绘制。

“参考”分辨率的想法让你可以使用一个分辨率编写所有的绘制命令……并且它会自动调整到客户端大小，而无需更改绘图代码。

这个片段是不言自明的，但如果你喜欢用英语解释:https://medium.com/@doomgoober/resizing-canvas-vector-graphics- with-aliasing -7a1f9e684e4d

下面的解决方案对我来说效果最好。因为我对编码相对陌生，所以我喜欢用视觉来确认某些东西是否按照我期望的方式工作。我在以下地点找到了它: 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个面都可见，这不是上述其他一些答案的情况。希望能有所帮助。