按钮不能在html画布上工作

Question

我发现很难让我的按钮在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很新，所以如果有任何菜鸟错误我会道歉。

Answer 1

不同浏览器的行为可能不同，以下适用于Firefox和Chrome（请注意zindex）。在https://jsfiddle.net/p9gz8rpm/处小提琴：

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

Answer 2

您忘记添加：

position: absolute;

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

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

修改

（如果你不想使用职位：绝对;使用职位：相对）