如何在 canvas 中包含按钮？

Question

我是 JavaScript、HTML 和 CSS 的新手，我正在制作游戏，但我不知道怎么做。

所以基本上有一个 canvas，我想在 canvas 上创建按钮，这样玩家可以点击按钮进入不同的游戏模式。

这是我已经拥有的：（差不多）

<canvas id="gameCanv"></canvas>

<button onclick="javascript:easy();" class="easyButton">Easy</button>
<button onclick="javascript:medium();" class="mediumButton">Medium</button>
<button onclick="javascript:hard();" class="hardButton">Hard</button>

我想把那些按钮放在 canvas 里面，但我不知道怎么做。

有没有办法使用 CSS、HTML 或 JavaScript 将按钮放在 canvas 中？

Answer 1

您添加到 canvas 的任何内容都必须是手工构建的。 HTML 和 CSS 根本无济于事。这就是 canvas 的目的 - 您正在转义 HTML 和 CSS 并告诉浏览器您想要自己管理绘制所有内容 - 它为您提供了很多功能，但要付出代价失去用户友好的 UI 工具，浏览器提供。

但是，也许您不需要整个游戏都在 canvas 中。您可以在 canvas 中制作游戏的一部分，或者在 canvas 之上叠加 HTML 元素，或者您甚至可以在 HTML 中构建整个游戏而不使用canvas 完全没有。这完全取决于您的需求。

也许其他人可以正确回答如何在 canvas 中实际呈现自定义按钮 - 我自己对 canvas 不是很熟悉。我主要想指出的是，这实际上可能不是您想要的，因为听起来您想要使用 HTML/CSS 的强大功能。如果您确实想在 canvas 中实际创建自己的按钮，我建议您阅读 canvas 教程，例如 this one，这样您就熟悉了来龙去脉使用 canvas，并且可以在适当的时候向 canvas 添加其他内容，例如角色、背景等。

如果，你想要的只是将 HTML 元素覆盖在 canvas 之上（而不是将它们放在 canvas 中），那么你可以像@barthy 那样做建议并使用绝对（或相对）位置将按钮移动到 canvas 元素上。

如何在 canvas 中包含按钮？

How do you include buttons inside a canvas?

html

javascript

canvas