HTML5手習い

Canvasとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Canvasの概要を説明し、Canvasオブジェクトとレンダリングコンテキストの取得方法について学びます。
講師:
05:25

字幕

このレッスンでは Canvas オブジェクトと RenderingContext の 取得方法について学びます アセットの canvas_basic.html を Chrome とテキストエディタで 開いておいて下さい Canvas は HTML5 で追加された グラフィックスの描画機能です Canvas を使えばブラウザ内の 特定の大きさをもった領域に 四角形や直線 曲線 画像といった オブジェクトを描画することができます ベクトルグラフィックスの描画であれば SVG などを使って行うこともできますが Canvas を使えばそれらの描画を JavaScript から行うことができるのです この機能を使えばブラウザの中で インタラクティブな ゲームアプリケーションのようなものを 作成することも可能です Canvas オブジェクトはブラウザ内での 特定の大きさをもったー 四角形の領域を表しています 尚 Canvas オブジェクトの データ型としては HTML CanvasElement 型になります HTML をテキストエディタで開くと body の内部の h1 要素の下に Canvas という要素が記述されています これが HTML5 で追加された canvas タグです アプリケーションからはこの要素を getElementById などで取得して 操作をしていきます canvas 要素には id 要素の他に width と height によって 四角形の大きさが指定されています canvas を指定する際には必ず サイズを指定しなければなりません それでは実際に Canvas オブジェクトを 取得してみましょう Chrome から Command+Option+I Windows の方は Ctrl+Shift+I で デベロッパーツールを開いて下さい div 要素の canvas 要素を見ると 確かに 300 ピクセル掛ける 300 ピクセル の 大きさを持っていることが分かります 「 JavaScript コンソール」を開いて下さい ここで Canvas オブジェクトを 取得してみます var context = document.getElementById そして Canvas オブジェクトに 指定されているー id を指定します id は sketch と記述されています これで Canvas オブジェクトが 取得できました 変数名を間違えたので打ち直します Canvas オブジェクトの中身を 見ていきましょう Canvas オブジェクトは dom オブジェクトの一種ですので コンソールから表示するとこのように HTML タグで表示されます Context オブジェクトは Canvas に 付属する様々な描画に関連する状態を 保持したオブジェクトです Context オブジェクトの型は CanvasRenderingContext2D 型となります 尚 webGL を利用することで 2D 描画以外にも 3D の描画を 行うことも可能ですが 本コースでは 2D 描画のみを扱います では Canvas の Context オブジェクトを 取得してみましょう Context オブジェクトは context という 変数の中に格納しています context = canvas の getContext というメソッドを使えば Context オブジェクトが取得できます パラメータとして 文字列で context の 種類を指定する必要があります canvasRenderingContext2D オブジェクトは 2d と指定すれば取得できます そして Enter Context オブジェクトを見てみましょう Context オブジェクトの中身はこのようになっています このように描画に関する様々な情報 塗りつぶし色やフォント それから アルファの値や― ラインに関する情報 シャドウに関する情報などが 保持されていることが分かります またそのプロトタイプを見てみると 様々な描画に関するメソッドが 格納されています これらの機能を使っていくことによって Canvas に描画ができるのです 本コースでは今後これらの機能について 具体的に解説していきます このレッスンでは Canvas オブジェクトと RenderingContext の取得方法について 学びました

HTML5手習い

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

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

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

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

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