Question

我在ArrayList中用一些动态文本填充画布。我将length的{{1}}高度设置为ArrayList或类似的东西。

HTML：

ArrayList.length * 20

JS：

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

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之后的canvas.height。

当我设置loop并且所有填写的文本都消失了。canvas.height = myheight空白。

如何在canvas动态填充文本之后设置height？

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

Answer 1

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

你需要浏览画布的内容并在调整大小的画布上重新绘制它

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

使用context.getImageData抓取整个画布，调整大小 canvas，然后使用context.putImageData以新的比例重绘它。
使用更新的尺寸和调用创建新画布 context.drawImage(oldCanvas, ...)将旧画布复制到新的一个。
致电context.setScale(xscale, yscale)并调用您的任何功能以前用来画画布。假设你设置了xscale和正确的yscale，它会自动将所有内容扩展到新的大小

Answer 2

快速解决问题的方法是在绘制文本之前计算画布高度，因为在使用canvas.height时画布将被删除

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

canvas.height = myheight;
myheight = 10;

for(var i = 0; 10 > i; i++){
   context.fillText("my text", 10, myheight);
   myheight += 10;
}

http://jsfiddle.net/borja204/66dn06tq/1/

填写一些文字后如何在画布上设置高度？

2 个答案: