はじめに
こんにちは！@70days_jsです。
今日は簡単なお絵かきアプリを作ってみました。
といっても、機能は2つです。笑
- 線を描画する
- 線のサイズを変更する
色の変更や消しゴム機能はありません。
canvas使ってません。
今日は51日目。(2019/12/8)
よろしくお願いします。
サイトURL
https://sin2cos21.github.io/day51.html
やったこと
やったことは2つです。
- 線を描画する
- 線のサイズを変更する
まずhtmlから（全文）↓
<body><divid="mouseMoveWrapper"><divid="positionDisplay">描画停止中</div><div><div><inputtype="range"min="1"id="range"max="100"step="1"value="1"/><spanid="rangeDisplay">1</span></div></div><divid="mouseMove"></div></div></body>id=positionDisplayで描画中かどうか表示しています。
id="range"が文字サイズを変更できるバーです。1〜100の調整ができます。
id=mouseMoveで線を描画します。
次にcss（全文）↓
body{margin:0;overflow:hidden;}#mouseMoveWrapper{width:100vw;display:flex;justify-content:center;align-items:center;flex-direction:column;}#mouseMove{height:90vh;width:90vw;border:solid1pxblack;}.dot{position:absolute;background-color:black;width:1px;height:1px;transform:translateY(-50%)translateX(-50%);}.dotクラスが線を描画してくれるクラスです。
transformをつけているのは、カーソルの位置を中心に線を描き始めるためです。
というのも、線は本当は線ではなくてdivで作っており、これがないとカーソルの位置にdivの左上端の部分がきて、ずれているように見えるからです。
最後にJavaScriptです。
長いですが載せます。（全文）↓
letmouseMove=document.getElementById("mouseMove");letpositionDisplay=document.getElementById("positionDisplay");letrangeWidth=1;letrangeHeigt=1;letx;lety;letflag=false;mouseMove.addEventListener("mousedown",function(){flag=true;});mouseMove.addEventListener("mouseup",function(){flag=false;});mouseMove.addEventListener("mousemove",function(e){drawStatusDisplay();if(flag){x=e.pageX;y=e.pageY;letdiv=document.createElement("div");div.setAttribute("class","dot");div.style.top=y+"px";div.style.left=x+"px";div.style.width=rangeWidth+"px";div.style.height=rangeHeigt+"px";mouseMove.appendChild(div);}});functiondrawStatusDisplay(){if(flag){positionDisplay.innerHTML="描画中";}else{positionDisplay.innerHTML="描画停止中";}}// _____ここからステータスバー_______letrange=document.getElementById("range");letrangeDisplay=document.getElementById("rangeDisplay");letdotElements=document.getElementsByClassName("dot");functionrangeChange(){rangeDisplay.innerHTML=range.value;rangeWidth=range.value;rangeHeigt=range.value;}range.addEventListener("input",rangeChange);mousedownとmouseupでマウスを押しているかどうかを判定しています。
押していたらflag変数にtrueを入れ、押していないときはfalseが入っています。
このflag変数を使い、drawStatusDisplay()関数で描画中かどうかを表示しています。
また、描画そのものに関してもこのflag変数を使うことで、マウスが押されていると描画、押されていないと描画しないという風にしています。↓
mouseMove.addEventListener("mousemove", function(e) {
drawStatusDisplay();
if (flag) ←コレ！
rangeについては、rangeWidthとrangeWidthという変数を用意し、描画にもそれを使うことでサイズの変更を実現しています。
他に調べたこと
実は今日promiseで何か作ろうと思っていました。
ですが、なかなか理解できなくて断念。
というわけで、途中までですが調べたことをアウトプットしておきます。
[x] 前提
- JavaScriptはシングルスレッド
- コールバック関数・・・関数が関数を呼び出すこと
[x] 同期処理と非同期処理の違い
- 同期処理・・・記述順に実行する（varとか一部違うけど）
- 非同期処理・・・処理の順番はシャッフル化、実行は1つずつ（ex: イベント処理）
[x] 並列処理と非同期処理の違い
- 並列処理・・・マルチスレッド
- 非同期処理・・・シングルスレッド（ex: promise)
[x] なぜpromise?
- 非同期処理でコールバックを多用すると読みづらい
- → 順序がめちゃくちゃだから
- → 同期的に書こう
- → つまりpromiseとは、実行は非同期処理で、読み方は同期処理
[x] promiseの特徴
- 非同期の関数は本来返したい戻り値の代わりに、呼び出し元にpromiseオブジェクトを返しておく
- 実行できるようになったら、呼び出し元にpromiseオブジェクトを通して値を渡す
[x] JavaScriptのスレッドでやらなくても良い仕事
- タイマー処理
- HTTP通信
- DB周りの処理
感想
divで線を作ると綺麗に書けなかったので、お絵かきアプリを作るならやっぱりcanvasなのかなぁとか思いました。
あと、promise難しい。でも頑張る。
参考
ありがとうございます！