JavaScriptでDrawingアプリを作成しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、JavaScriptでDrawingアプリケーションの実装方法を学びました。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

準備が完了したので、Drawingアプリを実装していきましょう。

今回は、Canvas APIを使用します。このAPIは、JavaScriptとHTMLのcanvas要素を介してグラフ描画の手段を提供します。

要素を取得する

画面操作に必要な要素を取得します。

以下の二つは、Canvas APIを使うためのイディオムみたいなもので、必須です。ctx定数には、canvasを操作できる様々な情報が詰まっています。

円を描画する

早速、Canvas APIを使って見ましょう。最初は、円を描画してみます。

arcメソッドは、円を描くことができるメソッドです。

線を描画する

線を描画してみましょう。

線を描くには、moveToメソッドやlineToメソッドを上手く組み合わせる必要があります。moveToは描画開始位置、lineToは描画終了位置ですね。

そして、線を引くには、strokeメソッドを呼びます。

mousedownイベントの登録

画面描画をするために、mousedownイベントを登録しましょう。

mousedownイベントは、マウスが画面にポイントされた時に発火するイベントです。

マウスポイントの位置を取得

続いて、マウスがポイントされた位置を取得します。ここは結構重要かもです。

mousedownイベント発生時に取得できるoffsetXoffsetYは、ポイントされた位置を取得できます。

この数値を先ほど作成した円・線描画関数に渡してあげると、画面描画ができそうですね。

mouseupイベントの登録

続いて、mouseupイベントを登録します。これは、マウスのポインタを外した時に発火するイベントです。

mousemoveイベントの登録

続いて、mousemoveイベントを登録します。これは、画面にポインタされたマウスのカーソルが動いている時に発火するイベントです。

これで、描画ができるようになります。

円(点)と線を結んで、綺麗な描画ができていますね。

あとは、色を変えたり、描画サイズを変更する処理がありますが、今まで作成してきたアプリケーションと同じような処理なので、簡単な説明までに留めておきます。

色を変更する

描画できる線の色は黒一色なので、色を扱えるようにしましょう。

描画サイズの変更

次は、描画サイズを変更します。

クリア機能

最後に、描画をクリアする機能を実装します。

これで完成です。

おわりに

画面描画は難しいと思っていましたが、工程を分けて考えるとそれほど難しくありませんね

描画もできるようになったので、ますます面白いアプリケーションが作れるようになった気がします^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す