设置画布的高度

Question

我有以下HTML代码段，我想用CSS设置样式：

<div class="outer">
  <canvas class=left"></canvas>
  <div class="right">
    <p>First line</p>
    <p>Second line</p>
  </div>
</div>

我希望实现的目标就像这张照片：

将画布和div放到左边和右边很好，有问题的部分是＆＃34;左边＆＃34;帆布（图中红色）。它的高度应该与＆＃34;右边的高度相同。并且它应该总是矩形的，即它的宽度应该与它的高度相同。如果可能的话，我希望在不将其设置为精确尺寸的情况下进行，因此如果＆＃34;正确＆＃34;它将被调整大小。有不同的行数。是否可以使用纯CSS解决方案实现它？

Answer 1

使用纯CSS无法按比例制作高度和宽度比例。您可以根据容器大小自动调整高度和/或宽度，但必须使用JavaScript来实现您所描述的比例缩放。

此答案包含有关动态尺寸canvas的更多信息：Relatively sizing HTML Canvas

要记住的另一件事是canvas是位图技术，而不是矢量。这意味着虽然可以实现有限的动态功能（如上所述），但通常canvas期望在显式硬设置像素值中工作。