如何使用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>