HTML5手習い

多角形の描画

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

ぜひご覧ください。

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

字幕

このレッスンでは Canvas に多角形を 描画する方法について学びます Canvas に多角形を描画するには 線分の場合と同様に Context オブジェクトの moveTo メソッドと lineTo メソッドを 使用します それではまず初めにアセットの sleepingcat.html ファイルと sleep.jpg というファイルを 用意しておいて下さい sleepingcat.html を Google Chrome と テキストエディタで開いて下さい Google Chrome で開くとこちらのような 画像が表示されます 今回描画する多角形は こちらの Canvas の中心点と その多角形の中心点が一致するような形で 描画してみたいと思います 多角形の頂点の計算には三角関数を用いて 円弧上の座標を計算し その円弧上の点から いくつかの点をサンプリングすることによって 多角形を描画してみたいと思います まずは多角形を表す為の いくつかの変数を定義しましょう 変数 n は多角形の頂点を 定義するものとします n = 5 であれば五角形を意味します また変数 RADIUS は多角形の座標の 計算の元になる円の半径を意味します 今回 RADIUS = 100 ですので 半径 100 の円を利用して 多角形を描画してみます まず分かり易いように多角形の 1番最初の点を描画してみます 点を描画する為に まずは beginPath そして点の色を指定します red ですね 厳密に点を描画するということはできないので 小さいサークルを描画することにします そして context の arc 描画する位置は Canvas の中心を 基準としますので まず Canvas の中心ですね canvas の width 割る 2 それから canvas の height 割る 2 これで中心を位置する座標になります そしてこれに + して RADIUS を半径とする円を描きます math の cos(コサイン) 初めの点は角度 0 とします これでいいですね そして y は RADIUS の sin 0(サイン ゼロ) それから描画する点の半径は 5 ピクセル 開始位置と終了位置の角度は 0 から 2 パイとします そして最後に塗りつぶしですね 色を出します canvas をスペルミスしていたようです convas になっていましたね a に書き換えて リロード fillStyle もスペルミスをしていました これでこのように赤い点が描画されました これが多角形の1番最初の頂点の 位置になります ここから円を描く形で その中からいくつかの点に対して lineTo lineTo lineTo lineTo としておくことによって 多角形を描画します では最初に繰り返し用の変数を定義して それから beginPath を再度実行します そうしないと直前に実行していた パスとつながってしまいます なので仕切り直す意味で新たに beginPath が必要です そして fillStyle は rgba 150 150 150 1 の グレーにします そして context で 多角形の最初の位置を指定します moveTo の 最初の位置は先程の点の 位置からコピーしてきましょう これで OK です そして for ループで 頂点の moveTo のループを回すのですが 今 五角形を描画しようとしていますので 初めの位置から 1 2 3 4 5 と 5回 lineTo を実行すれば 描画することができます ですが 今回違ったやり方をしてみます 5回 lineTo をするのではなく n - 1 で4回 lineTo をしてみましょう lineTo のコードはこれと似たような感じで ここの角度の部分に正しい角度を 毎回計算して入れてやります 角度用の変数も作りましょう 角度は a に入れることにします a は 2 パイ割る n これを i を掛けたものになりますね i ではなく i +1 ですね これでいい筈です これを角度に入れます それからここで呼び出すメソッドは moveTo ではなく lineTo です つまりここに最初に moveTo をして そこから lineTo lineTo lineTo lineTo という感じで1番最初の点の 1つ手前の所まで lineTo をします その上で context の closePath という メソッドを使います この closePath を使うことによって 1番最後の位置から1番最初の位置ー パスの1番最初の点までを 直線で補完してくれます つまりこれによって パスが必ず閉じられた 図形になることを保証できるのです これで描画してみましょう stroke はこのようになります そして stroke を fill に変えれば このように塗りつぶされた 多角形が描画されました 勿論 n を変えれば n を 10 にすれば 十角形になります このレッスンでは Canvas に多角形を 描画する方法について学びました

HTML5手習い

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

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

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

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

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