javascript - 按钮在 html Canvas 上不起作用

Question

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

Can I put an HTML button inside the canvas?

但我没有任何效果。这是 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 中调用的函数

函数 colorChange(颜色) {
警报(“adadadsdasd”)；
var c = document.getElementById('whiteboard');
var ctx = c.getContext("2d");
ctx.fillStyle = 颜色;
}

我对 JS 还很陌生，所以如果有任何菜鸟错误，我深表歉意。

Answer 1

不同浏览器上的行为可能有所不同，以下适用于 Firefox 和 Chrome(请注意 zindex)。 fiddle https://jsfiddle.net/p9gz8rpm/ :

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