1. cardcapt

    No comment

    cardcapt
Changes in body
Source | HTML | Preview
@@ -1,71 +1,71 @@
レイヤーを実装していきます。
↓この部分
![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104527/f76ea736-1de9-2d85-7336-31ca460d220e.jpeg)
まず、ラジオボタンのname属性を同じにします。
```html:
<p><label><input type="radio" name="rdoLayer" checked>上レイヤー</label></p>
<p><label><input type="radio" name="rdoLayer">下レイヤー</label></p>
```
これで両方のラジオボタンにチェックが付く状態から、片方1つにチェックが付く状態になります。
次にレイヤーを作るに辺りcanvasが2枚必要なので増やしました。
↓変更前
```html:
<canvas id="canvas" width="800" height="600"></canvas>
```
↓変更後
```html:
<div id="canvasarea">
<canvas id="canvas" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600"></canvas>
<!--/#canvasarea--></div>
```
↓スタイルシートはこんな感じ。
```css:
#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)にしています。
+canvas自体を position:absolute にして、canvasを入れている#canvasarea疑似要素で clear:both を付けました
+そして、#canvasの方が上に来るようにz-indeを2にしています。(#canvas2は1)
最後にJSです。
今までの処理に下レイヤー用の#canvas2をコピペし、各動作の前にレイヤーの上レイヤーと下レイヤーどちらを選ばれているかを確かめる処理を追加しました。
冗長で長くなるので差分は↓をご覧下さい。
・[[github]今回の修正内容はこちら](
https://github.com/cardcapt/canvas_helloworld/commit/b470ce93084282b0bc5dd98020d33432a1639e2e)
これで右側の実装が完了しました。
次回は下の実装を行います。
最初:[お絵かきできるSNSを作りたい!](https://qiita.com/cardcapt/items/d15fedf80d336f6b4bb9)