HTML5手習い

線分の描画

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
moveTo,lineToメソッドを使用して、キャンバスに線分を描画する方法を学びます。
講師:
06:01

字幕

このレッスンではキャンバスに 線分を描画する方法について学びます キャンバスに線分を描画する為には まず Context オブジェクトの beginPath でパスの指定を開始し その後に 線分の開始位置を指定し そして線分の終点を指定することで 線分が描画できます それでは実際にブラウザ上で 描画してみましょう まずはアセットから sleeping_cat.html それから sleep.jpg を用意しておいて下さい そして sleeping_cat.html を テキストエディタと Google Chrome で 開いて下さい Google Chrome で開くと このような画面が描画されます それでは JavaScript コンソールを 開きましょう Mac の方は Command + Option + I Windows の方は Ctrl + Shift + I でしたね Context オブジェクトは 既に取得済みです context という変数の中に入っています 描画する前にストロークカラーを 指定しておきましょう strokeStyle = white 白で線を描きましょう そして beginPath を 呼び出して パスの指定を開始します 線分の開始位置を指定するには Context オブジェクトの moveTo メソッドを使います moveTo メソッドを使うことによって Context オブジェクトが保持している 現在位置を移動することができます context の moveTo 位置は 10px 10px 左上から 10px 10px ですね こちらを指定しておきます 線分の終端を指定する為には Context オブジェクトの lineTo メソッドを使います lineTo メソッドを実行することによって Context の現在位置も 同時に変更されます つまり moveTo を実行したのと 同じ効果が得られます よって 連続した線分を描く場合には moveTo は最初の1回で十分です context の lineTo 20 pixel 掛ける 20 pixel の位置に ラインを描画してみましょう そして stroke で 線分の描画が完成です stroke このように左上に線分が描画されました そして lineTo を実行した時点で 現在位置― つまり次の線分の始点も 同時に移動していますので ここから更に線分の描画を 続けることができます lineTo 例えば 20 の 30 そして再度 stroke をやれば このように 先程の線分の終わった位置から また新たな線分を描画することができました では この moveTo と lineTo を使って キャンバス上に階段状に 複数の線分を描画してみましょう まずこのように描画位置を 保持しておく為の変数と それからループ用の変数を用意します i がループ用の変数です そして最初の位置を 代入しておきましょう 最初の線分の位置は左上から 10px 10px の位置とします そして strokeStyle で 線分のスタイル 色を指定します rgba 150 150 150 1 グレーにしておきましょう そして beginPath メソッドで パスの指定を開始します それから canvas の初期状態では 現在位置が設定されていませんので moveTo で現在位置を設定します context の moveTo を x y の位置にしておきましょう それから繰り返し文を使って 複数線分を描画してみます 例えば 80 80 本ほど線分を描画してみます そしてこの中にパスに線分を どんどん追加していくわけですが 偶数・奇数によって 処理を振り分けましょう 繰り返しが偶数の場合は― x を 10 増加させましょう そして逆に繰り返しの回数が 奇数の場合には y を プラス 10 増加させましょう そして context の lineTo で 順々に線分のパスを追加していきます そして最後に context の stroke すると― このようにギザギザの線分が描画されました 複数の線分を描画する場合には このように lineTo だけ 何回もやっておいて stroke は最後の1回で十分です このレッスンではキャンバスに 線分を描画する方法について学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

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

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

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