如何在三个画布 (HTML) 之间切换？

Question

https://www.codepile.net/pile/Lobdr3DV

这是我的代码的链接，我实际上是想在彼此之上制作三个画布。每个画布将有 1 个按钮，单击该按钮将隐藏其他两个画布并使活动的画布可见。

function swapCanvases1() {
  canvas.style.visibility='hidden';
  canvas2.style.visibility='hidden';
  canvas3.style.visibility='visible';
}

function swapCanvases2() {
  canvas.style.visibility='hidden';
  canvas2.style.visibility='visible';
  canvas3.style.visibility='hidden';
}

function swapCanvases3() {
  canvas.style.visibility='visible';
  canvas2.style.visibility='hidden';
  canvas3.style.visibility='hidden';
}

我试过这样做，但如果你尝试在浏览器中运行我的代码，所有画布并排显示在屏幕上，即使我按下相应的按钮也不会隐藏。

一些帮助会很棒，谢谢。

Answer 1

代码可能需要进行一些严重的重构，无论如何：img.src=... 似乎是问题所在。没有设置 img 变量，因此 onclick 函数最终会出错（因此这些交换函数甚至不运行），您应该在开发者控制台 (F12) 中看到。

还可以考虑使用display='none/block'; 而不是visibility='visible/hidden'; 或将画布position: absolute; 设置为重叠。