HTML

HTMLのcanvasとJavaScriptでお絵かきアプリ【色・消しゴム追加編】

【お絵かきアプリ】 カラーパレットを 使った色変更と 消しゴム機能を 追加してみる

今回は前回記事の「【初心者】HTMLのcanvasとJavaScriptでお絵かきアプリ作る【ベース作り編】」で作成したものに次の機能を実装していきます。

今回追加する機能
  • カラーパレットを使って色選択出来るようにする
  • 消しゴム機能をつける

今回の記事で出来上がるものは次の画像のものになります。

今回のお絵かきアプリ(色選択・消しゴム機能追加)今回のお絵かきアプリ(色選択・消しゴム機能追加)

 

また、今回作成するお絵かきアプリのソースコードと、実際の挙動確認は次のリンクから確認できます。

今回は、前回記事「【初心者】HTMLのcanvasとJavaScriptでお絵かきアプリ作る【ベース作り編】」の内容がベースとなっているので、

お絵かきアプリやゲームを作るのに興味あるけど、そもそもまだcanvas要素を使ったことがない。

お絵かきアプリ以外でcanvas要素は何に使えるのか知りたい。

上記のようなことを思っている方は、冒頭でも述べた前回記事「【初心者】HTMLのcanvasとJavaScriptでお絵かきアプリ作る【ベース作り編】」から読み始めることをオススメします。

また、前回記事を読んでいない方も、まずはそちらから読んでいただけるとより理解してこの記事を読み進めていけるかと思います。

それでは、今回の記事は次の内容で話を進めていきます。

今回の記事内容
  • ライブラリを使ってカラーパレットを用意する
  • 消しゴム機能の実装は超簡単

それでは1つ目から解説していきます。

ライブラリを使ってカラーパレットを用意する

カラーパレットとは色を直感的に選択できる機能のことです。

冒頭でも使った画像をあらためて以下に貼ります。以下の画像でいうと画面右側の色選択が出来る部分が今回作るカラーパレットになります。

今回のお絵かきアプリ(色選択・消しゴム機能追加)今回のお絵かきアプリ(色選択・消しゴム機能追加)

 

今回カラーパレットの実装のために「colorjoe」ライブラリを利用することにしました。

colorjoe」の使い方は複数あり、詳細は「ドキュメント」を参照していただけたらと思いますが、今回は色の選択だけ出来れば良いので次の機能を使うことにしました。

利用した機能
  • カラーパレットの設置
  • RGBで色を選べる機能
  • 選択した色情報を取得する機能

それでは、上記機能を実装するために追加したコードを確認していきましょう。

カラーパレット機能を実装するために追加したコード

今回説明するHTML、JavaScriptファイルでは前回から追加したコードのみを説明します。

今回紹介しないコードについては、前回記事「【初心者】HTMLのcanvasとJavaScriptでお絵かきアプリ作る【ベース作り編】」を参照していただけたらと思います。

HTMLの追加コード

それではHTMLのコードから見ていきます。

カラーパレットを設置するために追加したコードは次の3点です。

追加コード
  1. 8行目で「colorjoe」が提供しているCSSを読み込む
  2. 20行目でカラーパレットを設置するための要素(今回はspan)を追加した
  3. 29行目で「colorjoe」のJavaScriptライブラリを読み込む

①と③に関しては「colorjoe」が提供しているファイルの読み込みを行っているだけです。

②に関しては、今回はspan要素を使いましたが、タグの要素はなんでも良くて、カラーパレットの設置で利用するのはidの値となります。

今回でいうと「color-palette」がidの値となり、これをJavaScriptで指定することで、②で追加した箇所にカラーパレットが設置されます。

JavaScriptの追加コード

それでは次にJavaScriptのコードを確認していきましょう。

1~7行目のコメントにも書きましたが、前回記事で使っていたコード内のコメントは削除して、先程述べたように今回追加したコードの説明コメントのみを書いています。

今回説明するコード以外の内容を詳しく知りたい方は、以下の前回記事を参照していただけたらと思います。

カラーパレットの機能を実装するためにJavaScriptに追加したコードは以下の3点です。

追加コード
  1. 15行目の「currentColor」変数に現在選択している色情報を保持する
  2. 75行目の「initColorPalette」関数でカラーパレットの設置と、色変更時に①で用意した「currentColor」変数の内容を更新する
  3. 93行目で②で用意した「initColorPalette」関数を実行して、カラーパレットの設定を有効化する

①のcurrentColor変数の内容は、線を引く時に実行されるdraw関数内の24行目の「context.strokeStyle = currentColor;」で利用されます。

②の関数内の最初(76行目)では、さきほどHTMLで用意したid値が「color-palette」のspan要素にカラーパレットの設置を行っています。

80行目では「colorjoe」が提供している色選択時のイベントである「joe.on(‘done’, コールバック関数);」を使っています。

これによって、色が選択されたらコールバック関数が実行され、86行目で①で用意したcurrentColor変数に保持している色情報を更新しています。

コールバック関数がわからないかたは、次の記事でコールバック関数について紹介しているのでそちらを参考にしていただけたらと思います。

消しゴム機能の実装は超簡単

消しゴム機能の実装はとても簡単です。

結論から言うと現在選択している色をcanvasの背景と同じ色である「」にすれば良いだけです。

さきほどのHTMLとJavaScriptで該当する部分だけ抜粋して説明します。

まずHTMLから説明しますと、消しゴム機能用のボタンを追加しました。今回は「eraser-button」をidの値として、こちらのid値を使ってJavaScriptで操作を行います。

次に、JavaScriptでは、initEventHandler関数に「eraserButton」と「eraserButtonのクリック処理」を追加しました。(6~11行目)

このeraserButtonのクリック処理の中を確認すると、10行目で「currentColor = ‘#FFFFFF’;」とcurrentColor変数の保持している色情報をを「白(=#FFFFFF)」に更新しています。

これだけで、消しゴム機能の完成です。

まとめ

今回は前回記事「【初心者】HTMLのcanvasとJavaScriptでお絵かきアプリ作る【ベース作り編】」で作成したものをベースに追加した機能をまとめると以下のとおりです。

今回のまとめ
  • colorjoe」というライブラリを使うことでカラーパレットをページに表示して、色選択を出来るようにした
  • 消しゴムモード」ボタンを追加して、クリックしたら現在の色をcanvasの背景色と同じ「」に変更するようにした

次回は、今回実装したものにさらに以下の機能をしたものを解説します。

次回追加するの機能
  • 線の太さを変更する機能
  • 現在選択している線の太さが直感的に分かる機能(canvasの2枚重ね)

今回作成したものはインターネットに公開済みです。ソースコードも含め、実際に内容を確認したい方は次のリンク先にアクセスしていただけたらと思います。

【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です