我如何使用html / css / js /切换两个画布之间的可见性?

时间:2014-12-02 19:12:27

标签: javascript html5 canvas

亲爱的stackoverflowers

我有2幅画布:

  1. 展示演示文稿的画布
  2. 第二个用于创建演示文稿的隐藏画布。
  3. 我只需点击一下按钮就可以切换哪个画布可见

    </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 ^^

    来解决它

    提前致谢

1 个答案:

答案 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>