我相信我已经找到了一个优雅的解决方案:

JavaScript

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS

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

到目前为止，还没有对我的表现产生任何大的负面影响。

如果你的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，或者获取窗口的高度/宽度并将其设置为像素值。

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

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

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

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

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

这对我很管用。 伪代码:

// 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

它仍然有效。

设置初始大小。

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