HTML5手習い

四角形の描画

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レンダリングコンテキストのfillStyle,strokeStyleプロパティで色を指定し、fillRect,strokeRectで四角形を描画する方法を学びます。また、clearRectメソッドで描画内容をクリアする方法についても学びます。
講師:
12:45

字幕

このレッスンでは Canvas に四角形を 描画する方法について学びます アセットの canvas_basic.html を Chrome とテキストエディタで 開いて下さい HTML を開いた状態では Canvas には 何も描画されていませんので このように文字が出ているだけです ここに四角形を描画してみましょう 四角形や様々な図形の 塗りつぶし色を指定する為には Context オブジェクトの fillStyle プロパティを使います また四角形の描画には fillRect メソッドを使います それでは Chrome で Command+Option+I Windows の方は Ctrl+Shift+I で 開発者ツールを開いて下さい そして JavaScript Console を 開いて下さい ではまずは Canvas オブジェクトを 取得しましょう Canvas オブジェクトは canvas という 変数の中に格納しています document. getElementById sketch Canvas オブジェクトには sketch という id が付与されています そして Context オブジェクトも 取得しましょう canvas object の getContext 2d 2d レンダリングコンテキストは getContext メソッドに対して 2d という文字列をパラメータで 与えることで取得できます そして fillStyle プロパティを指定します デフォルトの状態で fillStyle プロパティが どのような値になっているか 見てみましょう このようにデフォルトでは 000000 と 黒が指定されています まずはデフォルトのままで描画してみましょう そして context の fillRect fillRect メソッドの1番目のパラメータと 2番目のパラメータには 四角形の支点を指定します 今は 00 から そして3番目と4番目のパラメータには 四角形の幅と高さを指定します 例えば 10 と 10 と指定して 実行するとこのように真っ黒な四角形が 10 ピクセル掛ける 10 ピクセル の 大きさで指定されました これを 15 掛ける 15 に 幅と高さを変更すれば より大きな四角形が描画されます 支点の位置を変えてみましょう 支点の位置を 50 掛ける 50 に変更すると このように原点がここ 00 ですので 原点から 50 ピクセル離れたここを基点として 15 ピクセル 掛ける 15 ピクセル の 四角形が描画されました キャンバスに描画した内容は clearRect メソッドを使って 一旦消去することができます clearRect メソッドを使ってみましょう context の clearRect このメソッドは fillRect と同様に 4つのパラメータをとります パラメータの意味も同じで支点を指定して それから幅と高さ 今回は全画面を消去するという意味で キャンバスの幅と高さ キャンバスそのものの幅と高さを 指定してみましょう canvas width canvas height 実行してみましょう このように先程描画した内容が クリアされました strokeStyle プロパティと strokeRect メソッドを使えば 塗りつぶしの四角形だけではなく 外側のボーダーだけをもったー 四角形を描画することもできます 使ってみましょう 例えば context の stroke strokeStyle として この strokeStyle の部分には CSS で 使用できる色の指定方法なら 何でも指定できます CSS では色の名前が指定できますので 例えばレッドにしてみましょう レッドに指定できました そして context の strokeRect パラメータの意味は fillRect と一緒です 例えば 50 と 50 を基点として 幅 20 掛ける 20 の 四角形のボーダーの部分を描画してみます このように描画されました それではこれらの機能を使って Canvas をランダムな四角形で 塗りつぶしてみましょう 今度は HTML の中に 実際のコードを記述していきます まずは Canvas の取得が必要です document.getElementById そして Canvas を取得したら Context も取得します getContext そして 2d コンテクストを取得します これで Canvas と Context の 取得ができました そうしましたら Canvas を 60 ピクセル掛ける 60 ピクセル の大きさを もった 5 掛ける 5 の マスで塗りつぶしてみたいと思います まずループをさせる為に いくつか変数を定義しておきます i と j が縦と横で ループを回す為の変数 そして r g b がランダムな 塗りつぶしの色を 格納する為の変数とします そして for ループで これで5回ループを回して さらに2次元で回しますので j でもループをさせます これで縦掛ける横でのループができました そしてループで毎回 r g b にランダムな 色を格納してみましょう 今回色の指定には CSS で使用できるー 16 進数3桁での指定 #fff や #aaa といった指定の仕方を使いましょう JavaScript の2つの関数を使います Math floor 関数と Math random 関数です これらの挙動をコンソールの方で 試してみましょう Math random 関数は0から1の ランダムな数字を返してくれます Math.random と書いて ( ) をつけて関数を呼び出してみましょう このように毎回呼び出すたびに ランダムな数字が返ってきます 因みにコンソールでは― このコンソールで上キーを押すことで 今までに入力した JavaScript の メソッドが再利用できます 履歴が残っています それで次は Math.floor です 0から1が返ってくるので これに 0x0f 16 進数で 0x0 10 進数ですと 15 ですね これを掛ければ このように 0から 15 までの値をランダムに 取得することができます CSS でこれを使うためには整数に 直す必要があるので Math.floor Math.floor を使ってやれば 小数点部分を切り捨てて整数の形に することができます これでランダムに0から 15 までの値を取得できるようになりました そしてこれを更に CSS で使う為に 16 進数表記にする必要があります その為には tostring で 数字の toString メソッドは引数を 指定できますので 16 進数 引数として 16 を指定しましょう すると このように でましたね 0x0a は 10 進数で 10 になります このように0から f の値がこれでランダムに 取得できるようになりました それでは実際にこれを使って ランダムな色の指定を作りましょう r = Math.floor 0x0f 掛ける Math. random これで赤の指定 次に緑の指定 青の 青成分の指定 そしてこれを fillStyle として 指定してやります CSS で 16 進数で色の指定を する前には # 記号をつける必要がありました そして + 記号で文字列を結合します r は数値型が入っていますので toString で文字列にしてやりましょう そして g の toString 16 b も toString 16 進数 はみ出てしまいましたね これで今度は 描画をしてやります 支点は 60 掛ける 60 なので i 掛ける 60 そしてもう一つの支点も i 掛ける 60 幅と高さは両方 60 と 60 です これで実行してみましょう strokeRect 塗りつぶしなのでこれは fill ですね toString がスペルミスでした これで再度実行してみると このように四角形がランダムな色で 塗りつぶされています ランダムなので実行するたびに 結果は変わります このレッスンでは Canvas で四角形を 描画する方法について学びました

HTML5手習い

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

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

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

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

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