我可以在一个唯一的 html 页面中创建两个画布空间吗？

Question

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

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

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

Answer 1

您可以在页面中定义任意数量的画布元素。只需给他们一个唯一的 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");

例子

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

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