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

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

---

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

您可以将画布放在一个具有固定目标高度的容器中。如果将其

溢出

设置为

隐藏

，则可以控制可以看到多少

---

更改画布的尺寸将其清除，这样做将不起作用。

您可以将画布放在具有固定目标高度的容器中。如果将其

溢出

设置为

隐藏

，则可以控制可以看到多少

---

更改画布的尺寸将其清除，这样就不起作用了。

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

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

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

---

我喜欢recursive的想法，它使用一个容器，您可以先缩小容器的大小，然后进行扩展，以显示绘制文本所需的额外画布空间

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

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

---

+1，很好地解决了画布在高度变化时自动清除自身的问题。我忘了告诉您我最终想将画布保存为图像，所以我猜“溢出：隐藏”在我的情况下不起作用，但在其他情况下是一个很好的解决方案+1，很好地解决了画布在高度变化时自动清除自身的问题。我忘了告诉您我最终想将画布保存为图像，所以我猜“溢出：隐藏”在我的情况下不起作用，但在其他情况下是一个很好的解决方案！