Canvasを使うためのJavaScript入門

直線でかたちを描く

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
2Dコンテクストにパスでかたちを描くこともできます。パスはbeginPath()メソッドで始め、closePath()メソッドを使って閉じます。そして、塗りはfill()メソッド、線はstroke()メソッドで描きます。
講師:
09:36

字幕

canvas に直線で図形を 描いてみたいと思います 練習としては塗りと線の付いた 四角形を書きます 四角形でしたら fillRect という 簡単なメソッドがあります けれどもこれからご紹介する書き方を使えば 三角形であろうと六角形であろうと 直線を結んだ図形であれば 自由に描くことが出来ます html ドキュメントの script 要素には とりあえずここまで書いてあります まずは初期設定の関数ですが canvas 要素を変数に取り出して そして context2D のオブジェクトを 変数にとります それから draw という 関数を定めています draw という関数には context2D の変数に入った 2Dコンテクストのオブジェクトを渡します 関数 draw は context2D の 変数に入ったオブジェクトを受け取って この後 実際に直線を使った 描画のステートメントを 付け加えることになります では直線を使った描画は どのようにするのか これからご説明します 2Dコンテクストのオブジェクトに 自由な形状を描くには パスというものを作ります パスというのは言ってみれば 形を描くアウトラインに相当するのですけど それ自体は塗りもなければ 線も付いていません つまり目に見えないアウトライン ということになります けれどまずそれを作ってから 最後に塗りを設定し そのパスの上に線を描く という手順になります 2Dコンテクストに対して パスを描くために 最低限必要なメソッドが2つあります パスを描き始める beginPath まんまですね それからパスを閉じる closePath です 実際にはその間に 線の設定や塗りの設定をします そして形状を実際に パスを描くメソッドを使って書きます ここまででは まだ透明ですから 最後に実際にパスの中を塗り パスの上に線を描く これで 初めて形状が目に見える形で出来上がります パスに対して塗りや線は このように設定します まず設定のほうですけれど 線の色は strokeStyle プロパティ 塗り色は fillStyle プロパティです そして実際に塗るには パスを落とした後 fill でパスの中を塗ります それから stroke で パスの上に線を描く そういう手順になります パスを描く手順は 別に関数を定めますので また後でご説明します では今ご説明した手順で パスを書くステートメントを追加しましょう 追加するのは 関数 draw です context2D に対して beginPath それから もうすぐに閉じておきましょう closePath でしたね 次に塗りと線の設定をしていきます 線の設定は2Dコンテクスト 変数 context2D に対して strokeStyle ですね プロパティです 色はそうですね 青にしましょう 0000FF です 次に塗りの設定を同様に fillStyle 色はシアンにしましょうか 00FFFF です あとはこの塗りと線の設定を実行する 描画するという処理ですね 塗りと線の描画をメソッドで加えます 塗りは fill です それから線は stroke さてこれで透明なパスの とりあえず始まりと終わりができました 実際にパスを書くという ステートメントを加えていく必要があります 矩形のパスを描く処理は 別に関数を定めます function として drawRect にしましょう そして この draw の関数の中から drawRect という関数を呼びだします 尤も やはり context2D に対する 処理を行うわけですから 引数を少し加えないといけないでしょう どんな引数が必要かは 呼びだす側 この draw 関数の中の drawRect を呼びだす ここで決めます 少なくとも context2D を渡さないと きっとパス 描けないですよね あと四角の形はある程度 自由に決められるようにしたいです ということで x 座標と y 座標 幅 高さ を渡すことにします 関数を呼びだす側で 引数を決めましたので 受け取る側 関数の定義のほうは その引数を受け取る変数を 指定していきます まず context2D ですね それから x 座標 y 座標 幅 高さ です これでとりあえず関数の外側 だけ決まりました この中にパスを描く 直線でパスを描くための ステートメントを追加していきます では次に直線でパスを描くには どのようにすれば良いのか 説明しましょう 直線でパスを描くには メソッドを2つ覚えれば大丈夫です いずれも xy 座標を 引数として定めます まずパスの引き始めは move to で指定します xy 座標を渡して これは丁度紙の上にペンを置くイメージですね そこから直線を引き始めます ではどこまで引くのかというのが line to というメソッドです xy 座標を渡します そうすると開始点から その点までの直線がひかれます では次にまた直線を引きたい場合には また move to かというと そうではありません line to で線をひいた座標は 自動的に次の開始点として認識されます ですから一筆書きのように 線を描いていくのであれば 最初に move to で座標を決め 次は line to, line to, line to というふうにメソッドを呼びだしていけば その直線が結ばれて図形が出来上がります script 要素の関数 drawRect に ステートメントを追加していきます 直線のパスを描きます まずは開始点ですね move to です そして x 座標 y 座標が 渡されていますから nX nY と 次 線を引きます line to ですね これは x 座標に 幅を足します できるだけコピーを使った方が タイプミスを防げますので コピーを使いましょう まあ Y ぐらいはいいと思います その感覚でいうと もうこれを このステートメントをコピーして しまったほうがいいですね 四角は4点ですから 今一個書きました 2個3個4個と このステートメントに 引数を調整すればいいということになります ではこの2番目は 今度は Y に高さ height を足します コピー使いましょうね では次同じように height を加える一方で X の幅は消します そして最後の点は 元来たところに戻るわけですから move to と同じ nX nY ということになります これで線と塗りのついた矩形 四角形が canvas に描かれます ブラウザで確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です canvas に確かに シアンの塗り 青い線の四角形 正方形が描かれました パスを直線で作り そのパスの塗りと線を色指定して 描いてみました

Canvasを使うためのJavaScript入門

このコースでは幅広いJavaScriptの技術の中からCanvasを使うときに知っておかなければならない基本を手短に解説します。変数や関数といったプログラミングの基礎を学ぶところから、実際にCanvasへ簡単な描画を行うまでを説明します。

1時間25分 (12 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。