HTML5手習い

特殊な塗り潰し

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
fillstyleプロパティで、図形の塗り潰しを指定したパターンで行ったり、グラデーションをつけたりする方法について学びます。
講師:
12:10

字幕

この動画では様々な 塗りつぶしスタイルを使って キャンバス上の図形を塗りつぶす 方法について説明します まず始めにアセットの pattern.html と pattern.png を用意して下さい pattern.html をテキストエディタと Google Chrome で開いて下さい Google Chrome で開くと このような形になります 開発者コンソールを Command+Option+I Windows の方は Ctrl+Shift+I で開いて下さい そして左側の Elements タブ 要素を検証します このような pattern 塗りつぶし用の 画像がロードされています これは画像の塗りつぶしのパターンとして 使用しますので JavaScript から使用します HTML 上では display none に指定して 非表示にしてあります キャンバスでは3つの特殊な塗りつぶし スタイルを使用することができます 1つ目は createPattern によって 作成できるもので 画像パターンを繰り返して 図形を塗りつぶすことができます 次は createLinearGradient によって 作成できるパターンで 直線的な Gradient を表現できます 3つ目は createRadialGradient を使って 作成できるパターンで 放射状に広がるグラデーションです ではこれらのスタイルを使って 図形を塗りつぶしてみましょう まず画像の繰り返しによる 塗りつぶしを試します 画像の繰り返しによる塗りつぶしをする為には createPattern メソッドを使って style オブジェクトを作成します style オブジェクトはこちらの pattern という 変数に格納することにします そして pattern は context オブジェクトの createPattern メソッドによって作成します こちらの pattern メソッドの1番目には 画像オブジェクトを渡します 画像オブジェクトは HTML の img 要素の dom 要素を使用します getElementById で pattern という id のついた こちらの 画像の img タグを使用します そして2番目にはどのように繰り返し行うか という繰り返しの仕方を文字列で指定します この繰り返しの仕方は CSS で使用できるものと同等です ここでは repeat を指定して 縦と横両方に繰り返すことを指定します これで pattern のオブジェクトの 作成はできました これを context の fillStyle に設定します そして context の beginPath で 画像パスの指定を開始 まずは円形を描いてみましょう 円の基点座標は 100 100 そして半径 150 開始角度 終了角度は 0 から 2 パイ まで そして fill このように先程の画像で塗りつぶされた 円が描画されました 次に linearGradient による 直線的な塗りつぶしを試してみましょう まず style オブジェクトを 作成する為の変数です gradient1 という変数名にしましょう そしてこの変数に context オブジェクトの createLinearGradient そしてこのメソッドには グラデーションの基点の 開始位置と終了位置の座標を与えます これらの座標はスクリーン上の座標を 与える必要があります ここでは canvas width 割る 2 キャンバスの真ん中から 縦の y 座標は両方 00 にしておきます そして x 座標の終端はキャンバスの右端 canvas width y は両方とも 0 でしたね そして gradient1 の addColorStop というメソッドを使います addColorStop ではグラデーションの 始点と終点の色を指定することができます 0 は始点 そして 1 は終点を意味します その間の 0.5 や 0.7 などの途中の色も 指定することが可能です addColorStop でいくつでもグラデーションの 途中での色を指定することができます 今回はオレンジからレッドに グラデーションさせてみます そして再度 円を描きましょう fillStyle に今作成したグラデーション オブジェクトを指定します そして beginPath それから arc 円の中心は 400 pixcel 掛ける 400 pixcel 右下の辺りですね そして半径 250 角度は 0 から 2パイまで そして fill リロードすると このように水平にグラデーションが かかった円が描画されました 続いて radialGradient 放射状のグラデーションを試してみます まずは同様に pattern オブジェクトを作成する為の 変数 gradient を 2 にします そして gradient2 = context の createRadialー Gradient これもスクリーン上の座標で 放射状に広がる円の内側と外側の 座標および大きさを指定します 先ずは最初の円 グラデーションを 開始する円を指定します 円の中心はキャンバスの真ん中にしておきます 真ん中から広がるグラデーションです 半径は 200 そしてもう一つ円の大きさを指定します 同様にキャンバスの真ん中から始まる円で 今度は半径 0 つまり― キャンバスの真ん中の点です 半径 200 の円から キャンバスの真ん中に向かって 円形にグラデーションしていく pattern です これも linearGradient の場合同様に addColorStop で色を指定します gradient2 addColorStop で グラデーションの始点は darkgreen グラデーションの終点の色は lawngreen 今度は キャンバスの中心からグラデーションが 広がっていってることが分かるように キャンバスの中心から外側に向かって らせん状に線を描画してみます strokeStyle は  今作成した gradient2 オブジェクト それから色が分かり易いように 線の太さを太めにします 線の太さを変えるには context オブジェクトの width プロパティを設定して 8 pixel にしておきます それから beginPath で パスの指定を開始 らせん状に円をいくつも描画していくのですが その個数分ループをしますので 繰り返し用の変数を作っておきましょう 繰り返し用の変数 i を宣言しておいて i = 0 から i が 600 個 600 個ほど線を描画します 600 より小さい場合にはループを継続 そしてその中では context の lineTo で 0.5 掛ける Math cos i 掛ける Math パイ 割る 30 角度は 30 分のパイずつ どんどん大きくしていきます そして これに i を掛けて 更にキャンバスの真ん中からやりたいので キャンバスの真ん中の座標を足します y 座標 については cos を sin に変えて width を height に変えます 繰り返しをするごとに i は 0 から 599 まで どんどん大きくなっていきますが それを使って 角度もどんどん大きくなっていきます この部分です 更に円の半径 円の半径はこの i に応じて どんどん大きくなっていきます これによって線が描画されます それから円の始点を 指定していませんでしたので 円の始点をキャンバスの中心に指定します そして最後に context の stroke これでリロードをすると エラーがありました 最後のセミコロンが抜けていましたね もう一つ 代入のイコールが抜けていました それで再度やると 今度はこちらの canvas のスペルミスでした エラーを修正すると このように らせん状に広がる線が描画されました そしてその円の色は 放射状に外側に行くに従って このようにグラデーションしています このレッスンでは特殊なスタイルを使って キャンバスの図形を塗りつぶす 方法について説明しました

HTML5手習い

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

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

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

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

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