Question

我想在画布上绘制一些东西并调整其大小为内容，而周围的div负责滚动画布内容。

到目前为止我所拥有的。基本的HTML代码如下所示：

function init() {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext('2d');
		
	var max = 5;
	var rectWidth = 30;
	var rectHeight = 30;
		
	for (i = 0; i < max; i++) {
		ctx.fillRect(i * rectWidth, i * rectHeight, rectWidth, rectHeight);
	} 
	ctx.fill();
}

#wrapper {
	height: 100px;
	width: 100px;
	overflow: scroll;
}
#canvas {}

<html>
<body onload="init();">
	<div id="wrapper"> 
		<canvas id="canvas" />
	</div>
</body>
</html>

发生的事情（至少在FireFox和Chrome中是这样）是，画布大约100x100像素大，您可以滚动一点（因为滚动条的大小是从100px中减去的）。

我想拥有的是滚动时所有5个正方形都可见。

我尝试过的事情：

#canvas {
    /* these screw up the scaling of the canvas, i.e. the squares become rectangles  */
    height: 100%; width: 100%
    /* or */
    height: 150px; width: 150px;
}

function init() {
    var canvas = document.getElementById("canvas");
    // [snip]

    // this makes the canvas invisible
    canvas.width = max * rectWidth;
    canvas.height = max * rectHeight;
}

<!-- works, but is not dynamic -->
<canvas id="canvas" width="150" height="150" />

我尝试结合使用这些方法，但是都没有真正满足我的需求。

如何动态更改画布的大小？

Answer 1

在此处讨论动态设置画布大小： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#Sizing_the_canvas_using_CSS_versus_HTML

可以使用CSS更改画布的显示大小，但是如果您   这样做是在渲染过程中缩放图像以适合样式大小，   这会使最终的图形渲染最终失真。

最好通过设置宽度来指定画布尺寸   和高度属性直接在元素上，或者   直接在HTML中或使用JavaScript。

您将在解决方案中看到我将尺寸 prior 设置为在画布上绘制。如果在绘制形状后调整画布大小，则会丢失它们。原因是因为画布的像素尺寸已更改并且上下文丢失（画布已重置）。您还可以在以下SO帖子上看到此内容：HTML canvas - drawing disappear on resizing

function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext('2d');
  var wrapper = canvas.parentNode;
  canvas.setAttribute("width", window.getComputedStyle(wrapper).width);
  canvas.setAttribute("height", window.getComputedStyle(wrapper).height);

  var max = 5;
  var rectWidth = 30;
  var rectHeight = 30;
  canvas.setAttribute("width", (max) * rectWidth + "px");
  canvas.setAttribute("height", (max) * rectHeight + "px");

  for (i = 0; i < max; i++) {
    ctx.fillRect(i * rectWidth, i * rectHeight, rectWidth, rectHeight);
  }
  ctx.fill();
}

#wrapper {
  height: 100px;
  width: 100px;
  overflow: scroll;
}

#canvas {
  border: 1px solid;
}

<html>

<body onload="init();">
  <div id="wrapper">
    <canvas id="canvas" />
  </div>
</body>

</html>

动态更改画布大小

1 个答案: