Javascript 如何在画布中包含按钮？

我对JavaScript、HTML和CSS非常陌生，我正在创建一个游戏，但我不知道如何创建

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

这就是我已经拥有的：（嗯，有点）

容易的
中等
硬的

我想把这些按钮放在画布上，但我不知道怎么做

---

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

添加到画布中的任何内容都必须手工构建。HTML和CSS根本帮不上忙。这就是canvas的用途——你正在转义HTML和CSS，并告诉浏览器你想自己管理所有的绘图内容——它给了你很大的力量，但代价是失去了浏览器提供的用户友好的UI工具

然而，也许你不需要把整个游戏都放在画布上。您可以在画布上制作游戏的一部分，或者在画布上覆盖HTML元素，或者您甚至可以在HTML中构建整个游戏，而不使用画布。这完全取决于你的需要

也许其他人可以正确地回答如何在画布中实际渲染自定义按钮-我自己对画布不太熟悉。我主要想指出的是，这可能不是您真正想要的，因为听起来您想要使用HTML/CSS的强大功能。如果你真的想在画布上创建自己的按钮，我建议你学习一下画布教程，这样你就熟悉了使用画布的细节，到时候可以在画布上添加其他东西，比如角色、背景等等

---

如果您只想在画布上覆盖HTML元素（而不是将它们放在画布中），那么您可以按照@barthy的建议，使用position absolute（或relative）在画布元素上移动按钮。

我鼓励您阅读CSS定位，例如：。如果您有一些具体问题，请学习、尝试并返回我们。提示：您可能希望绝对定位将按钮放置在画布上方。

<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>