1. cardcapt

    No comment

    cardcapt
Changes in body
Source | HTML | Preview
@@ -1,77 +1,78 @@
レイヤーの実装していきます。
↓この部分
![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自体を position:absolute にして、canvasを入れている#canvasareaは疑似要素で clear:both を付けました。
そして、#canvasの方が上に来るようにz-indeを2にしています。(#canvas2は1)
最後にJSです。
今までの処理に下レイヤー用の#canvas2をコピペし、各動作の前にレイヤーの上レイヤーと下レイヤーどちらを選ばれているかを確かめる処理を追加しました。
冗長で長くなるので差分は↓をご覧下さい。
・[[github]今回の修正内容はこちら](https://github.com/cardcapt/canvas_helloworld/commit/b470ce93084282b0bc5dd98020d33432a1639e2e)
↓黒で上レイヤー・紫で下レイヤーを使いました。
![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104527/5dfa4a08-5d9e-f708-4ed4-1f34ca722843.jpeg)
ちゃんとレイヤーになってますね。
これで右側のカラーパレット・線の太さ・レイヤーが完成です。
![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104527/b0f2dff3-a985-eb73-c740-54bdc27aad62.jpeg)
次回は下の実装を行います。
![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104527/be8ccca7-84f5-c1fe-2ae5-3fcfd22b99c7.jpeg)
+次:[お絵かきできるSNSを作りたい!9](https://qiita.com/cardcapt/items/929699a12c2d0f8e269f)
最初:[お絵かきできるSNSを作りたい!](https://qiita.com/cardcapt/items/d15fedf80d336f6b4bb9)