Canvasを使うためのJavaScript入門

描画に塗り色を定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
塗り色を変えるには、2DコンテクストのfillStyleプロパティに、HTMLと同じく#記号で始まる6桁のカラー値を文字列で定めます。
講師:
06:22

字幕

canvas に矩形を描いた時 塗りの設定を特にしていないと デフォルトの黒になります この塗り色を変えてみたいと思います 矩形を描く JavaScript コードを 念のために確認しておきましょう JavaScript は関数を定めています その中で canvas の要素を getElementById メソッドで取り出し その取り出したエレメントの オブジェクトに対して getContext メソッドで 2Dコンテクストの オブジェクトを取り出しました そして その2Dコンテクストオブジェクト に対して fillRect メソッドで 座標が左上角 10 10 で 幅と高さが 100px の 矩形を描いています この関数は body 要素に定めた onLoad 属性に指定してありますので body 要素が読み込まれると 実行されます 矩形の塗りを定めるには 2Dコンテクストのオブジェクトに対して 塗りを定めるメソッドを呼び出します その前に この関数なんですが initialize という名前にある通り 目的としては初期設定をする というつもりです そうすると 四角を描いたり 塗りを設定したりという処理は ちょっと別に分けた方が 管理がしやすいでしょう この処理は別の関数にしたいと思います script 要素に関数を加えます 関数は function と 名前はdraw にします そして2Dコンテクストのオブジェクト に対して fillRect メソッドを呼び出す このステートメントは移動します そして initialize の関数から 新たに定めた関数を呼び出します さて これでいいでしょうか ブラウザで確かめてみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します canvas の領域は 真っ白で何もでてきません これは script の実行に 問題が生じたからです 何が問題なのか もう1度 JavaScript コードを確認してみましょう 新たに定めた関数 draw の中で 2Dコンテクストのオブジェクトに対して fillRect という 矩形を描くメソッドを呼び出しています ところで この変数 context2D に オブジェクトを入れたのはどこでしょうか ここですね initilize という 関数の中です そしてこの context2D という 変数は function の中で var 宣言されています これはローカル変数です ローカル変数ということは この function の中だけでアクセス可能で 別の関数からはアクセスができないのです では どう対処しましょう ここでは関数の引数を使いたいと思います 具体的には この draw の中で context2D 2Dコンテクストの オブジェクトが欲しいです だったら この initialize の中で 関数 draw を呼びだす時に 引数で渡してしまって それをこちらで受け取ればいいと思います では関数に引数を渡す あるいは引数を受け取る関数は どのように定義したらよいのか ということを確認してみたいと思います 引数を受け取る関数の定義の仕方です まず呼びだすほうですが 呼びだすときは 関数の名前に () その () の中に渡したい値を 引数として入れます そうしたら関数の定義のほう function のほうでも その関数に対して () の中に引数を定めます 具体的には ここに変数を入れます そうすると その変数の中に 渡された値が入ります そうしたら その変数を元に 関数の処理を行っていけば 無事 引数が受け取れる ということになります では改めて html ドキュメントの JavaScript コードを書き換えてみましょう 関数を呼びだすステートメントのほうでは 2Dコンテクストのオブジェクトの入った 変数を括弧の中に入れて渡しています そうしたら受け取るほうの関数の定義 こちらでは やはり括弧の中に 引数を定めます 変数 context2D という値を 引数として入れました これで OK です では確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します まずは黒い矩形が 元通りに描かれました では次に塗り色を設定しましょう script 要素に定義した 関数 draw に対して 塗り色を設定するステートメントを加えます 塗り色はやはり 2Dコンテクストのオブジェクト 変数は context2D これに対してプロパティを設定します fillStyle というプロパティです そして カラー値を設定します これは html ドキュメントなので カラー指定をする場合と一緒です 井桁「#」でスタートして 色は青にしたいと思います 0000FF です 塗り色が正しく設定されたかどうか ブラウザで確認してみます 「ファイル」メニューから 「ブラウザでプレビュー」です 矩形に青い塗り色が設定されました 2Dコンテクストのオブジェクトに対して 塗りを設定する― fillStyle プロパティの説明でした

Canvasを使うためのJavaScript入門

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

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

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

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

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