HTML5手習い

座標変換

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
rotate,scale,translate,setTransformationといったメソッドを使用して、キャンバスに描画する図形に回転・拡大縮小・並行移動といった座標変換をかける方法について説明します。
講師:
10:05

字幕

このレッスンでは キャンバスで描画する図形に 座標変換をかける方法について説明します 座標変換とは描画する図形に対して 回転や拡大・縮小 平行移動といった 操作を行ってから描画を行うことです canvas に座標変換を かけるためのメソッドとしては Context オブジェクトの― rotate scale translate といったメソッドがあります これらのメソッドを実行してから 例えば fillRect などの 描画操作を行うことで 描画される図形が 回転されたり拡大されたり あるいは 平行移動されたりして その後に描画されます また これらのメソッドの効果は 累積していきます 従って 例えば rotate の 30 度という操作をした後に 再度 rotate の 30 度という操作をすると 次に描画する図形は 60 度回転して描画されます これらの操作は 行列の掛け算に基づいています 現在の変換行列は Context オブジェクトの setTransform メソッドによって 設定する事が可能です なお 行列演算そのものについては 本コースの範囲を超えるため 取り扱いません 本コースにおいて行列演算について 1つだけ知っておくべきことは 単位行列という 特殊な行列を設定することによって 変換演算をリセットできるという事です また変換を行う順序は重要です 座標変換において平行移動を行ってから 回転を行うことと 回転を行ってから 平行移動を行うことでは意味が違います 回転の変換は 原点を中心として行われるため 例えば 左上の様な四角形を その中心を軸として回転させたい場合には いったん平行移動を行ってその四角形の中心を 原点に持ってきてから 回転を行って 再度 平行移動を行って 元の位置に戻すという操作が必要になります 平行移動をせずに 直接回転をかけてしまったとすると 左下の様に四角形の中心を 軸とした回転とはならず 意図した結果にはなりません それでは実際に変換演算を JavaScript を使って試してみましょう アセットの animation.html を テキストエディタと Google Chrome で 開いてください まずは アニメーションの枠組みを 記述しましょう アニメーションをする為に window の requestAnimation Frame これにコールバックを渡し― そしてその中で処理が終わったら 再度自分自身を呼び出します request の AnimationFrame (draw); そしてアニメーションの時間の経過を 表すための変数を timestamp を使用して計算します start 変数が未初期化ならば― スタート変数を timestamp で初期化し そして ミリ秒の時間を秒に直します 秒に直した方が 取り扱いが便利だからです さてこれでアニメーションの 枠組みができました それでは とりあえず四角形を 描画してみましょう context の fillStyle = 'white' そして context の fillRect で 原点から サイズ 100 の四角形を描画します リロードしてみましょう このようにキャンバスの原点― このあたりです このあたりを軸に四角形が描画されました 四角形を描画する時の基点は 左上になります そして左上から 100 pixel 100 pixel という 幅と高さで 四角形が描画されます では この四角形を時間の経過に従って 回転させてみましょう まずアニメーションをさせるためには 毎回 Frame を全てクリアする必要がありました その際に注意が必要なのは 変換の演算は蓄積されているため 変換演算を毎フレーム 単位行列― すなわち変換が何もない状態に リセットする必要があるということです 変換をリセットするために setTransform で― (1,0,0,1,0,0) という 値に設定します この1,0,0,1,0,0というのが 単位行列です そして単位行列に設定したうえで clearRect でバッファをクリアします 一度リロードします clearRect の メソッド名が間違っていました setClearRect ではなく clearRect です リロードします 今度は成功しました そして回転させてみましょう 回転を行うには 画面をクリアした後に context の rotate メソッドを使います 回転の角度は 時間をそのまま与えましょう するとこのような回転になりました 回転はしているのですが― 我々が今やりたいことは四角形の真ん中を 中心として回転する事なので 意図した結果とは違っています これは回転が原点を中心として 行われてしまうためです そのため回転をさせる前に 平行移動しましょう translate の -50 -50 これで四角形の中心が原点に来てから 回転が行われます なお 変換操作は描いた順とは逆順に 適用される事に注意してください これで こちらの左上が原点ですので 原点を中心に四角形が回転しています では この四角形を今度は 真ん中に持ってきましょう context の translate canvas の幅と高さを使います すると canvas の スペルが間違っていました スペルを修正してリロードします このように canvas の真ん中あたりで 四角形が回転するようになりました また scale メソッドを使えば 四角形を拡大縮小もできます 原点を中心に持ってきた後に scale 0.5 math cos (t) これも時間によって アニメーションをさせています cos は -1 から1までの 値を返しますので 0.5 をかけることによって -0.5 から 0.5 までの大きさを返します それに +2.0 をすることによって その範囲は 1.5 から 2.5 までとなります 高さについても同様とします これでリロードをしてみましょう このように拡大縮小されて 表示されます 再度説明しましょう まず translate -50 -50 によって 四角形が原点に移動され その後に拡大縮小をされます なお拡大縮小についても同様に 原点を中心として行われるため 回転と同様の注意点が必要です それから回転を行います 回転と拡大縮小の操作については どちらの順番で行っても大丈夫です それから再度平行移動を行って 四角形をキャンバスの 真ん中に持ってきています また clearRect で 画面をクリアする直前に setTransform で 変換をリセットすることによって 必ず画面全体が クリアされるようにしています このレッスンでは キャンバスに描画する図形に 座標変換をかける方法について学びました

HTML5手習い

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

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

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

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

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