HTML5手習い

レスポンシブな描画

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Windowのresizeイベントを利用することで、Canvasに描画された図形をウィンドウサイズに応じて、画質を劣化させずに拡大する方法について学びます。
講師:
07:43

字幕

このレッスンでは キャンバスをレスポンシブにする すなわちウィンドウサイズに応じて キャンバスの描画内容を変化させるー 方法について説明します それではまずはじめに アセットの canvas_basic.html を テキストエディタと Google Chrome で開いてください キャンバスでは一度ラスタライズされた図形 すなわち描画されてピクセルデータに なってしまった図形は 画像オブジェクトと同じ扱いなりますので 拡大や縮小をすることはできません CSS を使って拡大や縮小を することはできますが そうした場合には描画されたピクセルは 劣化してしまいます ではキャンバスに円を描画して これを確認しましょう まずは キャンバスオブジェクトを取得します document.getElementById そしてコンテキストオブジェクトを取得します そして context オブジェクトの fillStyle を設定します 200, 50, 50, 0.5 という値にしてみます それから stroke も同時に描画するので strokeStyle も設定しましょう strokeStyle は 透明度を 1 に上げた同じ色です それから stroke をちょっと太めにしてみます stroke の太さは lineWidth です 15 pixel の太さにします そして arc メソッドで円を描画します 円はキャンバスの中心に描画します そして円の大きさは キャンバスいっぱいに描きましょう canvas の height ÷ 2 半径がキャンバスの height 割る 2 ですね そして始点・終点 開始角度・終了角度は 0 から 2π まで これで fill してから stroke を描画 リロードします strokeStyle のスペルが間違っていました 再度リロードします するとこのようにキャンバスいっぱいに 画像が描画されました では これをCSSを使って 無理やり拡大してみましょう まずこの div はもう不要なので削除して divの外に canvas を出してしまいます canvas のサイズは 300 pixel x 300 pixel で指定します そしてこのタグは削除して sketch idを持ったキャンバスの width を 無理やり 100% にしてみます するとこのように拡大はされましたが 画質がかなり劣化しているのが 分かるでしょうか これは一度描画されて ラスタライズされたピクセルを 無理やり画像として拡大しているためです これを防ぐためにはウィンドウサイズに応じて キャンバスのサイズを動的に再設定して 内容を再描画する必要があります それでは実装してみましょう こちらの CSS の指定は もう要らないので消します そしてキャンバスのサイズは 動的に指定するので こちらも不要です それから再描画する関数をまとめましょう function の refresh refresh には幅と高さを与えます これをキャンバスのサイズにします canvas の width は width そして height は height そしてキャンバスのサイズを再設定したあとに 再度描画 必ず描画内容を再描画する必要があります そしてウィンドウのサイズが 変更されたイベントを検知します window.addEventListener resize というイベントをキャッチします そしてイベントリスナーの中で refresh 関数を呼び出します refresh 関数に渡すパラメータは window の innerWidth それから window の innerHeight です このとき body に overflow: hidden を付けておくと スクロールバーが出なくて良い感じになります そしてこのイベントは ウィンドウのサイズが変更されたときにしか 飛んできませんので まず初回の描画は自分でやりましょう ということで このイベントリスナーの外に 1回これを書いておきます さてこれでリロードしてみます 何かエラーがあったようです 余計な丸括弧とセミコロンがありましたね ではこれで するとこのように円が描画されますが ウィンドウサイズを変更しても 自動的に追随してきます そして画質はいくら大きくしても 劣化していないことに注意してください もしこれが画像であるのなら 縮小したり拡大したりすれば この線の太さも画像の比率に応じて 細くなったり太くなったりするはずです しかしこれは canvas で必ず 15 pixel で 線を描いていますので 小さくしても大きくしても 線の太さが変わりません このようにウィンドウの resize イベントを利用することによって キャンバスの描画内容を レスポンシブにすることができます このレッスンでは ウィンドウのサイズに応じて キャンバスの描画内容を 動的に変更する方法について学びました

HTML5手習い

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

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

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

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

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