Question

我有一个画布，它从页面的包装器中获取其全宽大小。画布包含图像。

包装器是响应式的，但画布不会使用包装器调整大小。

以下是我正在使用的代码：

#wrapper {
  position:relative; 
  margin:auto; 
  width:100%; 
  height:100%; 
}

#container {
	position:absolute;
	width:80%;
	height:80%;
	left:0;
	bottom:0;
	margin-left:60px;
	}

#canvasTop {
  position:absolute; 
  top:0px; 
  left:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="container">
   Stuff happen here ...
   </div>
 </div>
 <canvas id="canvasTop" width=512 height=512></canvas>

position: absolute

希望任何人都可以提供帮助！

Answer 1

检测调整大小

您必须订阅window的resize事件：

window.addEventListener("resize", updateCanvas);

function updateCanvas() {

  // update canvas size (and position) here
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // redraw canvas content based on new size
  // ...
}

updateCanvas();   // initial call

由于画布的大小调整将使其内容清晰，我们必须重新绘制所有内容。

使用CSS（不推荐）

在大多数情况下，您不希望使用CSS调整大小，因为这会拉伸绘制到画布上的所有内容，使其变得模糊。但是，在您仍然使用CSS的情况下，您可以通过这种方式基于CSS大小设置画布的大小：

#canvas {
  width: 100vw;   /* or use 100% depending on your scenario */
  height: 100vh;
  }

然后在resize事件处理程序中：

var rect = canvas.getBoundingClientRect();  // get absolute size in pixels
canvas.width = rect.width;
canvas.height = rect.height;

这应该会给出位图大小和元素大小之间的1：1关系。如果你使用填充或边框，你也必须添加它们的大小。用帆布最好避免这些。而是将画布包装在div元素中，并在其上设置此类样式。

处理事件流

进行调整大小时需要注意的另一件事是会向订阅者发送许多事件。大多数你不需要。因此，为了使其更具流动性和响应性，您可以去除事件：

var timer;
window.addEventListener("resize", function () {
  clearTimeout(timer);
  timer = setTimeout(updateCanvas, 100);  // adjust time to liking
});

Answer 2

尝试将此添加到您的CSS：

#canvas{
    width:100vw;
    height:100vh;
}

VW代表视口宽度，VH代表视口高度，因此字面意思是整个视口（视口是窗口的可见侧）。

如何制作帆布液

2 个答案:

检测调整大小

使用CSS（不推荐）

处理事件流