html - 将 3 个画布并排放置在一页上

Question

我需要并排放置一 (3) 个以上的 HTML5 Canvas。左右为 200px 宽。中心将填充其余的空间。这三个都需要垂直填充屏幕。

我正在做的是构建一个绘图程序。左右将是绘图工具。中心将是绘图区域。我想我需要一个专门用于绘图区域的画布，以便在不与工具窗口重叠的图像的情况下缩放、平移、滚动绘图。本质上，我使用中心画布作为剪切范围。我不知道这是否是最好的方法。

我尝试将 3 <canvas>es 放在屏幕上，但它们只是重叠。我将 3 放入<div>s 中，但它们只是堆叠。

想法？

Answer 1

根据评论，<canvas>不是 void 标签，所以你需要写</canvas>.

您还可以使用它来提供有用的文本，以防有人浏览一些不太现代的东西：

<canvas id="one">
    Hey, your browser doesn’t support the Canvas API!
    You should upgrade if you want to use this.
</canvas>