javascript - 填充一些文本后如何在 Canvas 上设置高度？

Question

我正在用 ArrayList 中的一些动态文本填充 Canvas 。我将高度设置为 ArrayList 的 length，例如 ArrayList.length * 20 或类似的东西。

HTML:

<canvas id="myCanvas" width="272px" style="border: 1px solid black"></canvas>

JS:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var myheight = 10;
for(var i = 0; mylist.length > i; i++){
     context.fillText("my text", 10, myheight);
     myheight += 10;
}

loop 工作正常，文本已填充..并且我正在尝试计算 loop 之后的 canvas.height。

当我设置 canvas.height = myheight 时，所有填充的文本都消失了。canvas 变成了空白。

动态填充canvas后如何设置高度？

帮帮我..谢谢..抱歉英语不好..

Answer 1

使用canvas.height = myheight调整窗口或 Canvas 大小会清除 Canvas

您需要保存 Canvas 的内容并在调整大小的 Canvas 上重新绘制

如果你想保存 Canvas 的内容并重新绘制它，这里有几个选项

1. 使用context.getImageData抓取整个 Canvas ，调整大小canvas，然后使用 context.putImageData 以新的比例重新绘制它。

2. 使用更新的尺寸创建一个新 Canvas 并调用context.drawImage(oldCanvas, ...) 将旧 Canvas 复制到新的一个。

3. 调用 context.setScale(xscale, yscale) 并调用您想要的任何函数最初用于绘制 Canvas 。假设您设置了 xscale 和正确缩放，它会自动将所有内容缩放到新的尺寸。