javascript - 我可以在一个独特的 html 页面中创建两个 Canvas 空间吗？

Question

我正在尝试创建一个具有两个 Canvas 空间的 HTML 页面，即。 e.可以显示对象的两个矩形。

在我的 HTML 代码中，我有这一行，它表示页面左侧尺寸为 540x600 dp 的矩形: <canvas id="canvas" width="540" height="600"></canvas>

但除此之外，我想在右侧生成另一个 Canvas 空间。是否可以？我该怎么做？

Answer 1

您可以在页面中定义任意数量的 Canvas 元素。只需给他们一个唯一的 ID 并为他们每个人创建一个上下文:

<canvas id="canvas1" width="540" height="600"></canvas>
<canvas id="canvas2" width="540" height="600"></canvas>

它们将默认放置为 inline。

然后在您的 JavaScript 代码中:

var ctx1 = document.getElementById("canvas1").getContext("2d");
var ctx2 = document.getElementById("canvas2").getContext("2d");

例子

var ctx1 = document.getElementById("canvas1").getContext("2d");
var ctx2 = document.getElementById("canvas2").getContext("2d");

ctx1.fillText("CANVAS 1", 10, 10);
ctx2.fillText("CANVAS 2", 10, 10);

<canvas id="canvas1" width="240" height="300"></canvas>
<canvas id="canvas2" width="240" height="300"></canvas>