我发现很难让我的按钮在HTML画布内工作。我认为onclick事件没有被调用，或者画布已经过度铺设，并且绘制了它们，但我无法弄清楚原因。我试图把一个更高的z-index按钮这里展示按钮无法在HTML画布上工作

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来说是相当新的，所以我很抱歉，如果有任何菜鸟错误的话。

来源

2016-01-23 Pudding

你不能改变的了的z-index元素，除非您将位置设置为至少相对第一位。尝试添加一个位置：相对;输入标签和z-index：2; – magreenberg

行为可以在不同的浏览器上有所不同，下面的工作在Firefox和Chrome上（请注意zindex）。小提琴在https://jsfiddle.net/p9gz8rpm/：

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

来源

2016-01-23 04:18:36 prabindh

谢谢。然而，将其设置为这意味着我无法在画布上绘制，现在按钮似乎叠加在一起。你可以在div中使用z-index，以便只有该部分位于画布上方？ – Pudding

是的，请使用position：标签做适当的处理（正如其他答案中所述） – prabindh

你忘了补充：

position: absolute;

你的按钮。 A z-index仅在具有该集合时才有效。

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

编辑：

（如果你不想使用的位置是：绝对的;使用的位置是：相对）

来源

2016-01-23 04:27:16 user3604535

按钮无法在HTML画布上工作

回答

你忘了补充：

相关问题