HTML5手習い

状態の保存

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
save,restoreメソッドを使用して、コンテキストオブジェクトの状態を保存・復元する方法について学びます。また、この機能を利用して、描画するオブジェクトを階層化して表示する例を紹介します。
講師:
14:02

字幕

このレッスン では キャンバスの Context オブジェクトの 状態の保存と復元について学びます Context オブジェクトの save メソッドと restore メソッドを使用することによって オブジェクトの様々な状態を一時的に保存 そして復元することができます 保存することのできる状態には 例えば 線や塗りつぶしの色 線の太さやテキストのサイズ また現在の座標変換行列などが含まれます 状態の保存と復元を利用することによって オブジェクトの描画の 階層化を実現することができます では実際に利用してみましょう まずアセットの animation.html を テキストエディタと Google Chrome で 開いて下さい このレッスンではキャンバスの 真ん中辺りを 拡大縮小してー アニメーションする四角形を描き その中に無数の小さな四角形をうごめかせます それらの小さな四角形は 外側の四角形のアニメーションに追随して アニメーションします ではまず外側の四角形を描画しましょう アニメーションの枠組みとして requestAnimationFrame を使用します コールバックを設定し コールバックには名前をつけておきます そして requestAnimationFrame の最後で 再度 requestAnimation を呼び出し 自分自身を設定します そしてアニメーションの計算に用いる 時間を計算しましょう 時間の計算の為に 基準の時間を保持しておく ー start という変数を定義します そして requestAnimationFrame の中で start がまだ未初期化であれば start を timestamp で 初期化します これが計算の基準時刻になります そして時間を秒に変換して 保存しておくための変数も用意します 秒の計算は timestamp マイナス start 基準時刻です それを1000 で割ります timestamp はミリ秒で 記述された時間だからです そして四角形を描画しましょう 四角形のサイズは様々な所から参照する為 変数として定義しておきます RECT_SIZE という変数を定義して 100 pixel を代入します そして先ずアニメーションと 座標変換の基本として フレームの最初に毎回 transform で 1,0,0,1,0,0 という値を設定します それから context の clearRect で キャンバスを毎回クリアします そして四角形を描画します 四角形はキャンバスの真ん中に描画したいので まず平行移動をかけます canvas width 割る 2 canvas height 割る 2 そして拡大縮小させたいので scale を使います scale は三角関数で アニメーションさせましょう 三角関数の角度の部分に そのまま時間を入れます y も同様です そして四角形の真ん中を 座標の原点に持ってくる為に 再度 traslate をかけます マイナス RECT_SIZE 割る 2 マイナス RECT_SIZE 割る 2 これで座標の変換ができたので 塗りつぶし色を設定して描画します 塗りつぶし色は白にしておきましょう そして fillRect で描画 描画する時の位置は原点で構いません なぜなら座標変換をかけてるからです それではコードが記述できたので リロードしてみましょう 何かエラーがあるようです コサインの記述ができていませんでした ここにコサインを足して 再度リロード すると set transform のスペルミスでした これを修正して 再度リロードすると もう一箇所あるようです canvas の height という プロパティを正しく書いて これで四角形の拡大縮小の アニメーションができました さてそれではこの拡大縮小する四角形の中に 無数の四角形を乱れさせてみたいと思います では先ず沢山の四角形を出すので その四角形の数を定義した変数を用意します NUM_RECTS は 100 個程度にしておきましょう それから繰り返し用の変数と その四角形の情報を保持したー 配列を作ることにします その配列を先ずは初期化しましょう NUM_RECTS の回数で ループをします そして その rects に対して 情報を push しましょう 各要素はオブジェクトになっており x 座標 これはランダムで初期化します その初期値は外側の四角形のサイズの 大きさで ランダムな数値を計算します それから y も同様です それからそれらの速度を 追加しておきましょう 速度も初期状態ではランダム -0.5 から 0.5 の値を出します そして速度は x 軸 y 軸両方に対して持たせます それからそれらの四角形を それぞれ独立に回転させましょう 角度もランダムで初期化します 最後に色を初期化します 色をランダムに初期化するために randomColor という関数を作成しましょう randomColor は どのような関数になるかというと 下の方に書いておきます RGB それぞれの色の値を先ずは ランダムに計算します RGB それぞれの値は 0 から 255 です これに random 関数から返ってきた値 0 から 1 の値ですね これを掛けてやり そして Math.floor にすることによって 小数点を切り下げます RGB どれも計算式は一緒です これを文字列の形にして返してあげましょう rgba という CSS の関数です そしてアルファ値は 1 これでいいはずです それでは 一度リロードしてみましょう エラーがあるようです randomColor の呼び出しが 記述が間違っていました もう一つエラーがあるようです RECTS という変数の定義が間違っていました スペルミスがあったので修正して 再度リロードすると どうやらエラーはなくなったようです では今度はそれぞれを描画してやりましょう RECTS の各要素に対して描画をかけます forEach を使ってループを回し そして座標を更新します ランダムに初期化した速度を使って x と y をそれぞれ更新してやり そして範囲外から飛び出した場合の為に このように 範囲外にぶつかった場合にはベクトル 速度を逆転させます つまり x が 0 より大きいか または その四角形の幅より大きい場合 左端に行ってしまったか 又は右端を越してしまったか その場合には 速度を -1 を掛けることによって 反転させます y の計算も同様です そして描画してやりましょう 塗りつぶし色は最初に計算した色 そして translate で 平行移動をし 回転もします それからその四角形の真ん中を 原点にもってくる為に もう一つ translate この四角形のサイズは 3 とします これで描画ができるでしょうか それぞれの四角形の座標を更新してやり それぞれの四角形の座標を使って 平行移動 それを行った後に描画 では試してみましょう このように 意図した結果とは 違ったものになりました 意図したのはこの四角形の中で 小さな四角形が反射しながら 乱れてアニメーションするというものです これはなぜかというと 変換行列というものが その結果が累積していくからです つまり ここでかけた回転や 平行移動が そのまま次のループで累積して どんどん回転や平行移動が 増していってしまうからです そのようなことを防ぐ為に ここで save メソッドを使って 一旦描画する前の直前の状態を 保存しておきます そして描画した後に restore することによって また自分自身が座標や色にかけた変更を復元 取り除きます そして次のループに回ってくると その状態ではまた ここの ループに入る前の状態です その状態で保存して 復元を繰り返すことによって それぞれの四角形に対して ばらばらな状態を適用することができます ではリロードしてみましょう このように小さな四角形が 大きな四角形の中で その拡大縮小の動きに合わせて 乱れてアニメーションしています このレッスンではキャンバスの状態の 保存と復元について学びました

HTML5手習い

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

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

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

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

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