如何使用HTML / CSS / JS/在2个画布之间切换可见性

how do i toggle visibility between 2 canvas using html / css / js /?

本文关键字：之间 可见性 布之间 HTML 何使用 CSS JS 2个      更新时间：2023-09-26

亲爱的叠花

我有 2 张画布：

  1. 显示演示文稿的画布，
  2. 还有第二个隐藏的画布来创建演示文稿。

我需要通过单击按钮切换可见的画布 

</div>
        <canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;" hidden="outputcanvas">
        </canvas>    
</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------->
<!-- input canvas -->
    <div>
        <canvas width="800" height="600" hidden="inputcanvas" ></canvas>
    </div>

可能吗？如果是，如何？

目前我试图用JS解决它^^

提前致谢

以下是使用按钮切换 2 个画布的可见性以使只有 1 个画布可见的一种方法：

  • 使用 CSS 通过定位将 2 个画布堆叠在包装器div 内。

  • 切换 2 个画布的style.visibility以响应您的按钮单击。

下面是一个示例：

var canvas1=document.getElementById('canvas1');
canvas1.getContext('2d').fillText('This is canvas1',20,20);
var canvas2=document.getElementById('canvas2');
canvas2.getContext('2d').fillText('This is canvas2',20,20);
swapCanvases();
document.getElementById("test").onclick=function(){
  swapCanvases();
};
function swapCanvases(){
  if(canvas1.style.visibility=='visible'){
    canvas1.style.visibility='hidden';
    canvas2.style.visibility='visible';
  }else{
    canvas1.style.visibility='visible';
    canvas2.style.visibility='hidden';
  }
}
body{ background-color: ivory;}
#wrapper{position:relative;}
#canvas1{position:absolute; border:1px solid red;}
#canvas2{position:absolute; border:1px solid blue;}
<button id="test">Swap Canvas Visibilities</button>
<div id=wrapper>
  <canvas id="canvas1" width=300 height=300></canvas>
  <canvas id="canvas2" width=300 height=300></canvas>
</div>

相关文章：