キャンバス、SVG、CSS3 によるグラフィックスの使用 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

このセクションでは、JavaScript を使った Windows ストア アプリでグラフィックスを使う方法について説明します。

このセクションの内容

トピック	説明
クイック スタート: キャンバスへの描画	キャンバス要素は、ページ上に四角形のビットマップ キャンバスを作成します。このキャンバスには、JavaScript を使って簡単にグラフィック イメージを描画できます。キャンバスは、ゲームを作成するときや、グラフィックスをリアルタイムで生成したり一定の間隔で変更したりするような状況で役立ちます。
キャンバス グラフィックスをアニメーション化する方法	キャンバス要素は HTML ドキュメント上に描画できる領域で、JavaScript を使って、アニメーション、グラフ、ゲームなどのグラフィックスを生成できます。 このトピックでは、キャンバス要素を使う基本的な描画をアニメーション化するために必要な手順について説明します。
グラデーションを作成する方法	図形や線の色は単色に制限されません。キャンバスで使われるグラデーションは、実際に色の値の 1 つです。このため、fillStyle プロパティと strokeStyle プロパティに適用できます。 グラデーションを使って、一定の方向に向かって画像の明るさや色を変化させることができます。 これは、背景画像の作成、地図での高度提示など、1 つの面に明暗を付ける必要がある場合に便利です。 グラデーションを使うと、グラデーション効果のために画像を使う必要がなく、読み込みのために使う帯域幅が減り、時間も短縮できるため、Web アプリの効率化に役立ちます。 また、プログラムで作成できるため、適用範囲の拡大や再利用も簡単です。
画像を表示する方法	canvas 要素は HTML ドキュメント上に描画できる領域で、JavaScript を使って、アニメーション、グラフ、ゲームなどのグラフィックスを生成できます。このトピックでは、canvas 要素を使って画像を表示するために必要な手順について説明します。

 

Windows ストア アプリで CSS と SVG キャンバスを使って、高速で軽いベクター グラフィックスをアプリに追加し、UI にアニメーションを適用できます。

ほぼすべてのベクター グラフィックスは SVG または Canvas を使って描画できますが、作業によっては、開発者自身の手で、またはコンピューター内の処理で、かなりの追加作業を実行する必要があります。

カスケード スタイル シート レベル 3 (CSS3) 2D 変換により、2-D 空間でオブジェクトを変換 (移動)、回転、拡大、傾斜させることができます。CSS3 3D 変換では、視点の変換によって奥行をシミュレートする機能が追加された 3-D 空間で、同様の変換がサポートされます。

複数の変換を個々に指定すると、変換後の結果はすべてを組み合わせたものになり、適用される順序によって変化します。