在不重新绘制的情况下为现有画布添加更多空间

Add more space to existing canvas without redrawing?

本文关键字：布添加 添加 空间 情况下 新绘制 绘制      更新时间：2023-09-26

我已经创建了一个画布，在上面绘制了图像和文本。是否可以在不重新绘制所有内容的情况下为当前画布添加更多空间（在我的情况下是高度）？我想在已经绘制的项目下面添加文本，但要做到这一点，我必须在画布上添加更多的高度。

或者我可以用另一种方式来做——创建一个太大的画布，然后添加我所有的文本，最后裁剪画布（去除白色未使用的空间）？

我喜欢递归的想法，使用一个容器，先将其缩小，然后展开以显示绘制文本所需的额外画布空间。

调整画布大小的另一种常见方法是将画布内容从临时画布上反弹。

// create a temp canvas (no need to add it to the DOM)
var tempCanvas=document.createElement('canvas');
var tempCtx=tempCanvas.getContext('2d');
tempCanvas.width=mainCanvas.width;
tempCanvas.height=mainCanvas.height;
// draw the main canvas to the temp canvas
tempCtx.drawImage(mainCanvas,0,0);
// resize the main canvas
mainCanvas.height+=30;
// restore the main canvas content by drawing the temp canvas
mainCtx.drawImage(tempCanvas,0,0);

您可以将画布放在具有固定目标高度的容器中。如果将其overflow设置为hidden，则可以控制可以看到的内容。

更改画布的尺寸可以清除它，这样就不起作用了。

相关文章：