如何使用html/css/js /切换2画布之间的可见性？

Question

亲爱stackoverflowers

我有2个画布：

1. 画布展示演示，
2. 并有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 ^^

感谢解决它提前

Answer 1

下面是使用一个按钮来切换的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>