Html5 画布高度和宽度属性

Question

到目前为止，我一直在分配我的画布属性：-

<canvas id="myCanvas" width="915" height="650" style="border: 2px double #000000;"></canvas>

但是，现在我遇到了一个场景，我的画布高度不是静态的。它需要是动态的。

例如，有时我会在画布上绘制一个 X-Y 图表，其中有 20 行，有时是 100 行。

这意味着我的 y 轴标签是动态和可变的。

在我的脚本开头我不知道这一点，在我的旧方法中我正在分配我的身高。

所以我需要一个计数器来跟踪 y 轴上的标签数量（比如 count` = 0，count ++）

现在，如何从脚本中动态更新画布的高度？

有人可以帮忙吗？

Answer 1

你可以像这样增加画布的高度：

var c=document.getElementById("myCanvas");
c.height = whatEverHeightYouNeed;

如果你用 CSS 改变高度，你的画布绘图会被扭曲。