时间戳

首页 > 解决方案 > 如何在三个画布 (HTML) 之间切换？

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

问题描述

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';
}

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

一些帮助会很棒，谢谢。

标签： htmlcanvashtml5-canvas

解决方案

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

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

推荐阅读