【问题标题】：Buttons not working on html canvas按钮在 html 画布上不起作用
【发布时间】：2016-04-29 19:17:15
【问题描述】：

我发现很难让我的按钮在 html 画布中工作。我认为没有调用 onclick 事件，或者画布被覆盖并覆盖它们，但我不知道为什么。我尝试将按钮放在更高的 z-index 上，如此处所示

Can I put an HTML button inside the canvas?

但我没有任何用处。这是画布和按钮的代码

<canvas id="whiteboard" style="z-index:1; position: absolute; left: 0px; top: 0px;"></canvas>
<input type="button" style="z-index: 2" value="blue" id="blue" onclick="colorChange('#0000FF');" />

这里是脚本标签

<script src="assets/js/color.js"></script>

以及我试图在 color.js 中调用的函数

function colorChange(color) { alert("adadadsdasd"); var c = document.getElementById('whiteboard'); var ctx = c.getContext("2d"); ctx.fillStyle = color; }

我是 JS 的新手，如果有任何新手错误，我深表歉意。

【问题讨论】：

您不能更改元素的 z-index，除非您首先将位置设置为至少相对位置。尝试添加一个位置：相对；到输入标签连同 z-index:2;

标签： javascript

【解决方案1】：

不同浏览器的行为可能不同，以下适用于 Firefox 和 Chrome（注意 zindex）。拨弄https://jsfiddle.net/p9gz8rpm/:

<canvas id="whiteboard" style="z-index:-1; position: absolute; left: 0px; top: 0px;"></canvas>

【讨论】：

谢谢。但是将其设置为这意味着我无法在画布上绘图，并且按钮现在似乎覆盖了。您可以将 z-index 与 div 一起使用，以便只有该段位于画布上方吗？
是的，请使用 position: 标签来适当地执行此操作（如此处其他答案所述）

【解决方案2】：

您忘记添加了：

position: absolute;

到您的按钮。 z-index 仅在具有该设置时才有效。

<input type="button" style="z-index: 2; position: absolute;" value="blue" id="blue" onclick="colorChange('#0000FF');" />

编辑：

(如果不想使用位置：绝对；使用位置：相对)

【讨论】：