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

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

如果你对保留纵横比感兴趣，并在纯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>

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

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

设置初始大小。

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

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

更新窗口大小调整。

function windowResize() {
  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', windowResize);

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

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