HTML5手習い

ベジェ曲線の描画

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
bezierCurveToメソッドを使用して、キャンバスにベジェ曲線を描画する方法を学びます。
講師:
09:07

字幕

このレッスンでは Canvas にベジェ曲線を 描画する方法について学びます ベジェ曲線とは自由曲線の1種で始点と終点と 二つのコントロールポイントによって 定義されます ベジェ曲線によって様々な図形を 描画することが可能になります 始めにアセットから bezier.html sleep.jpg sleeping_cat.html を用意して下さい そして sleeping_cat.html besier.html を Chrome で開いて sleeping_cat.html をテキストエディタで 開いて下さい それぞれ開くとこのような画面になります そして bezier.html を開くと このような曲線が現れます これがベジェ曲線です この HTML では赤い点が 始点と終点を定義しています そして青い点が二つの コントロールポイントを示しており その点をドラッグすることによって 移動することができます このように始点 終点をいじってみることで ベジェ曲線で様々な形の曲線を 描けることが分かるでしょう キャンバスにベジェ曲線を描くには beginPath でパスの追加を始めてから bezierCurveTo メソッドを使用します bezierCurveTo メソッドでは二つの コントロールポイントの x y 座標と 終点の x y 座標を指定します では実際に JavaScript コンソールで ベジェ曲線を描画してみましょう sleeping_cat.html を開いて JavaScript コンソールを開いて下さい まずは曲線の描画色を定義しましょう context の strokeStyle = white にしておきます そして beginPath で パスの追加を始めて それから moveTo メソッドで 曲線の始点を指定します これは線分と同様です それから context の bezierCurveTo メソッドを使用して まず最初のコントロールポイントの座標です 20 10 としておきましょう 次に二つ目のコントロールポイントの 座標を 20 20 としておきましょう そして3番目のコントロールポイントの 座標を 10 20 としましょう そして context の stroke するとこのように左上に ベジェ曲線が描かれました 少し座標をいじってみましょう 例えば二つのコントロールポイントの 座標はそのままで 終点の座標を 50 200 位にしてみます そして再度 stroke 今度はこのような形になりました 今度は― 二つのコントロールポイントを いじってみましょう 例えば 200 100 それぞれ 10 倍してみます そして再度 stroke 今度はこのような曲線になりました 因みに bezierCurveTo をやると lineTo をやった場合と同様に 現在の始点が書き換わりますので bezierCurveTo を順々に呼び出していけば 必ず連続した曲線が描かれます それでは bezier.html の ソースコードの方を解説していきます bezier.html をテキストエディタで 開いて下さい 下部に JavaScript のソースコードが 記述されています こちらのプログラムの設計は このようになっています このプログラムはベジェ曲線を描画します そしてベジェ曲線の始点と終点を 赤い円で描画し コントロールポイントを青い円で描画します またマウスドラッグで始点 終点 コントロールポイントを編集できます points という編集に配列として 始点とコントロールポイントを 1番目と2番目のもの そして終点を格納します また moving という変数を作成し その中には編集中の添え字の番号を格納します また moving は編集中には添え字が入りますが 編集が完了した場合 編集していない場合には null が入ります それではソースコードを見ていきましょう 今説明したとおり points という 変数が定義されており その中には四つの点が定義されています 最初から入っている点の座標は 初期状態での点の座標です つまり こちらの HTML をリロードした場合の この配置がここに格納されています そして moving は初期状態では 0 です つまり非編集状態から プログラムは開始されます そして次に来るのが点の編集のコードです 点の編集には Canvas 上で mousedown や mousemove mouseup をしたときに それらの動作が行われます mousedown はマウスを押したときの動作です そして mousemove は マウスを移動した時のイベントハンドラ mouseup はマウスを放した時 マウスの左ボタンを放した時の イベントハンドラになります またこちらの draw 関数は実際に 与えられた点―四つの点から ベジェ曲線 それから四つの赤と青の点を 描画する関数になります まず mousedown ハンドラの中では この event の offset x と event の offset y で マウスが指している現在の位置を取得し それを p という点の オブジェクトの中に格納します そして四つの点のそれぞれに対して 距離を比較してその距離が RADIUS で 定義される円の半径 これはコントロールポイントや 始点 終点を示す円の半径ですね その半径よりも距離が小さければ 処理を開始する となっています 2点間の距離はこのような式で定義されます x1 y1 x0 y0 がそれぞれ二つの点の x 座標 y 座標を定義しています それぞれの点の差をとって それで2乗してから 更に和をとって そしてその平方根をとることによって 2点間の距離が求まります 2点間の距離を計算する関数は プログラムの下部の こちらの distance 関数です 今定義したような数式が記述されています そしてこの distance 関数を使用して 距離を判定し その距離が半径以内におさまっていた場合には まず moving に編集中の 添え字を格納します そして編集中の点の新たな座標を代入します それから draw によって再描画します 次に mousemove マウスを移動中のイベントですが moving が null 以外である場合 つまり編集中である場合には その編集中の点の座標を更新して そして再描画 それから mouseup マウスを放した時には moving に null を代入することによって 編集が完了したことを示します そして最後に draw 関数 ここでベジェ曲線と四つの点を描画します draw が呼び出されるたびに キャンバスを全て一旦クリアし そしてこちらで strokeStyle を設定してから 4つの点によって定義されるベジェ曲線を描画します その後に四つの点それぞれを このように arc メソッドを使って 描画します それぞれの点の色は このように予め定義された色の配列から とってきています これによりこのようなプログラムの 挙動が生み出されています このレッスンでは Canvas にベジェ曲線を 描画する方法について学びました

HTML5手習い

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

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

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

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

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