1. cardcapt

    Posted

    cardcapt
Changes in title
+お絵かきできるSNSを作りたい!8
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,72 @@
+レイヤーを実装していきます。
+
+↓この部分
+![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)にしています。
+
+最後にJSです。
+今までの処理に下レイヤー用の#canvas2をコピペし、各動作の前にレイヤーの上レイヤーと下レイヤーどちらを選ばれているかを確かめる処理を追加しました。
+
+差分は↓をご覧下さい。
+
+・[[github]今回の修正内容はこちら](
+https://github.com/cardcapt/canvas_helloworld/commit/502615e870aebb4acd22a453f554afc5a20f215e)
+
+これで右側の実装が完了しました。
+次回は下の実装を行います。
+
+最初:[お絵かきできるSNSを作りたい!](https://qiita.com/cardcapt/items/d15fedf80d336f6b4bb9)