複数のキャンパスを重ねて、レイヤーにする。クリックイベントはz-indexが一番大きいキャンパスで発生。
<style type="text/css">
#parent {
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#id_canvas2 {
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#id_canvas3 {
position:absolute;
top: 0px;
left: 0px;
z-index: 3;
}
#id_canvas4 {
position:absolute;
top: 0px;
left: 0px;
z-index: 4;
}
#id_canvas5 {
position:absolute;
top: 0px;
left: 0px;
z-index: 5;
}
div{
position: relative;
height: 600px;
}
</style>
<div id="click_erea">
<canvas id="parent" width="400"height="600"></canvas>
<canvas id="id_canvas2" width="400"height="600"></canvas>
<canvas id="id_canvas3" width="400"height="600"></canvas>
<canvas id="id_canvas4" width="400"height="600"></canvas>
<canvas id="id_canvas5" width="400"height="600"></canvas>
</div>
|