我有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 ^^
来解决它提前致谢
答案 0 :(得分:4)
这是使用按钮切换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>