Canvas初心者がおえかきボード作ってみた！
おはようございます😊まおです！
ちょっと遅くなりましたが、今週もなんとか趣味開発できました！！
今回は、前回同様Canvas APIを使用して、【おえかきボード】を作ってみました🎈
早く画面とソースはこちらです💁♀️
おえかきボード
■全画面はこちら
https://tonamao.github.io/OekakiBorad/
■コードはこちら
See the Pen OekakiBoard by tonamao (@tonamao) on CodePen.
■参考にさせていただいたのはこちら
↑↑↑ロジックの大枠など参考にさせていただきました！
↑↑↑スマホに対応させるために参考にさせていただきました！
イベントリスナーの種類
今回のCanvas APIとしては、前回開発して理解した内容の応用でなんとかなりました！
が、今回つまったのは、イベントリスナーの種類でした。
今回使用したのは、こちらです。
■イベント
mousedown・・・・・・マウスのボタンが押されたとき
mousemove・・・・・・マウスカーソルがターゲット内を動いているとき
mouseup ・・・・・・・マウスのボタンが離されたとき
mouseout・・・・・・・マウスカーソルがターゲット外にいったとき
今回は、canvas内をドラッグしている間絵を描く仕様となるので、
mousedownで描画開始、mouseupで描画終了となるように実装しました。
また、canvas外にカーソルが動いた場合、描画終了となります。
続いてこれらの原理をもとに、マウスを使用しないスマホ対応も行いました！
スマホはマウスイベントでは動いてくれないので、専用のイベントを使用します。
実装時はこれを知らず、ここまででぬか喜びしておりました🙄
スマホ用に使用したイベントはこちらです。
■スマホ対応用イベント
touchstart・・・・・・タップ開始
touchmove ・・・・・ターゲット内を動かしているとき
touchend・・・・・・タップ終了
これでスマホ対応できた....と思いきや..！？....でしたね..
Safariで画面がびよ～～～ん
決してふざけているわけではありません。はい。...😅
Safariの仕様として、画面をスライドした際に、
画面外が表示され、画面がびよ～んって感じになりますよね？
これに対応しなければ、おえかきボードが動いてしまって
おえかきどころではありません。
参考サイトの情報をもとにこちらを使って対処しました。
event.preventDefault();
これを入れることで、Safariのデフォルトの動きを制御できます。
今回私は、canvasタグ内でおえかきをする場合のみ
制御するように処理を入れました。
今回はなかなか実装する時間がなくて、大変でした。。。
しかもスマホ対応のために別途処理が必要とは....
まだまだですね...！
引き続きいろいろ、勉強していきたいと思います！
来週こそはゲームらしいものを作ってみたい...💪
