1. cardcapt

    No comment

    cardcapt
Changes in body
Source | HTML | Preview

レイヤーを実装していきます。

↓この部分
WS000000.JPG

まず、ラジオボタンのname属性を同じにします。

<p><label><input type="radio" name="rdoLayer" checked>上レイヤー</label></p>
<p><label><input type="radio" name="rdoLayer">下レイヤー</label></p>

これで両方のラジオボタンにチェックが付く状態から、片方1つにチェックが付く状態になります。

次にレイヤーを作るに辺りcanvasが2枚必要なので増やしました。

↓変更前

<canvas id="canvas" width="800" height="600"></canvas>

↓変更後

<div id="canvasarea">
<canvas id="canvas" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600"></canvas>
<!--/#canvasarea--></div>

↓スタイルシートはこんな感じ。

#canvasarea{
    width: 800px;
    height: 600px;
    background-color:#FFF;
}
#canvasarea:after, #canvasarea:before {
    content: "";
    clear: both;
    display: block;
}
#canvas{
    z-index:2;
}
#canvas2{
    z-index:1;
}
#canvas2,#canvas {
    width: 800px;
    height: 600px;
    position: absolute;
}

canvasを入れている#canvasareaに疑似要素で clear:both を付けて、中のcanvas2枚を重ねています。
そして、#canvasの方が上に来るようにz-indeを2(#canvas2は1)にしています。

最後にJSです。
今までの処理に下レイヤー用の#canvas2をコピペし、各動作の前にレイヤーの上レイヤーと下レイヤーどちらを選ばれているかを確かめる処理を追加しました。

差分は↓をご覧下さい。冗長で長くなるので差分は↓をご覧下さい。

[github]今回の修正内容はこちら

これで右側の実装が完了しました。
次回は下の実装を行います。

最初:お絵かきできるSNSを作りたい!