将3幅画布并排放置在页面上

时间:2013-05-01 04:21:36

标签: html5 canvas

我需要并排放置多个(3)HTML5 Canvas。左右将是200px宽。中心将填补剩余的空间。这三个都需要垂直填充屏幕。

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

我尝试过的是在屏幕上放置3 <canvas> es,但它们只是重叠。我在<div>中放了3个,但它们只是叠加了。

思想?

1 个答案:

答案 0 :(得分:0)

根据评论,<canvas>不是空标记,因此您需要编写</canvas>

您还可以使用它来提供有用的文字,以防有人浏览不太现代的东西:

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