この要素は他の技術よりも利点があります
HTML5にはCANVASというエキサイティングな要素が含まれています。 それは多くの用途がありますが、それを使用するには、JavaScript、HTML、および時にはCSSを学ぶ必要があります。
これは、CANVAS要素を多くのデザイナーにとって少し難しいものにしています。実際、JavaScriptを知らなくてもCANVASのアニメーションやゲームを作成する信頼できるツールがなくなるまで、ほとんどの要素が無視されます。
どのHTML5キャンバスが使用されているか
HTML5 CANVAS要素は、以前はFlashなどの組み込みアプリケーションを使用して生成しなければならなかった多くのものに使用できます。
- 動的グラフィックス
- オンラインゲームとオフラインゲーム
- アニメーション
- インタラクティブなビデオとオーディオ
実際に、人々がCANVAS要素を使用する主な理由は、プレーンなWebページを動的なWebアプリケーションに変換し、そのアプリケーションをスマートフォンやタブレット用のモバイルアプリに変換することがどれほど簡単かという理由によるものです。
私たちがフラッシュを持っているなら、なぜキャンバスが必要なのでしょうか？
HTML5仕様によると、CANVAS要素は次のとおりです。
"...解像度に依存するビットマップキャンバスは、グラフ、ゲームグラフィックス、アート、または他のビジュアルイメージをその場で描画するために使用できます。"CANVAS要素を使用すると、グラフ、グラフィックス、ゲーム、アート、その他のビジュアルをWebページ上でリアルタイムで描画できます。
既にFlashでこれを行うことができると思っているかもしれませんが、CANVASとFlashの主な違いは2つあります。
- CANVAS要素は、HTML内に埋め込まれています。 描画するスクリプトは、HTMLまたはリンクされた外部ファイルにあります。 これは、CANVAS要素がドキュメントオブジェクトモデルの一部であることを意味します。
- Flashは埋め込み外部ファイルです。 EMBEDまたはOBJECT要素のいずれかを使用して表示し、他のHTML要素と直接対話できません。 CANVAS要素はDOMの一部であるため、さまざまな方法でDOMとやり取りできます。
- たとえば、フォーム要素の入力など、ページの他の部分がインタラクトされたときに変更されるアニメーションを作成することができます.Flashでは、Flashムービーまたはアニメーションを開始することができますが、 CANVASを使用すると、フォームフィールドからアニメーションにテキストを追加しても、さまざまなエフェクトを作成できます。
- CANVAS要素は、Webブラウザによってネイティブにサポートされています。 ユーザーが実際にFlashを使用するには、ブラウザにプラグインがインストールされている必要があります。 これは、時代遅れのFlashインストールや、オペレーティングシステムが単にそれをサポートしていないという事実のために、ほとんどの人にとってはしばしば面倒です。
- 以前は、すべてのブラウザにプラグインがインストールされていましたが、それはもはやケースではなく、多くのものが難しさのためにプラグインを削除しています。 さらに、普及しているiOSプラットフォームでも利用できません。
Flashを使用する予定がない場合でもキャンバスは便利です
CANVAS要素が混乱する主な理由の1つは、多くの設計者が完全に静的なWebに慣れてきたことです。 画像はアニメーション化されてもかまいませんが、GIFで完成しましたが、もちろんビデオをページに埋め込むこともできますが、ページ上に置かれ、インタラクションによって開始または停止する静的なビデオですが、それだけです。
CANVAS要素を使用すると、スクリプト言語を使用してグラフィックス、イメージ、テキストを動的に制御できるため、Webページにインタラクティブ機能を追加することができます。 CANVAS要素は、画像、写真、グラフ、グラフをアニメーション要素に変換するのに役立ちます。
キャンバス要素の使用を検討する場合
あなたの聴衆は、CANVAS要素を使用するかどうかを決定する際に、まず考慮すべきです。
オーディエンスが主にWindows XPとIE 6,7、または8を使用している場合、動的キャンバス機能を作成することは、それらのブラウザーがサポートしていないため無意味になります。
Windowsマシンでのみ使用されるアプリケーションを構築する場合は、Flashが最適な方法です。 WindowsおよびMacコンピュータで使用されるアプリケーションは、Silverlightアプリケーションの恩恵を受ける可能性があります。
ただし、アプリケーションをモバイルデバイス（AndroidとiOSの両方）と最新のデスクトップコンピュータ（最新のブラウザバージョンに更新）で表示する必要がある場合は、CANVAS要素を使用することをお勧めします。
この要素を使用すると、それをサポートしていない古いブラウザの静止画像のようなフォールバックオプションを使用できるようになります。
ただし、HTML5のキャンバスをすべて使用することはお勧めしません。 あなたはロゴ、見出し、またはナビゲーションのようなものには使用しないでください（これらのいずれかの一部をアニメートするのに使用しても問題ありません）。
仕様によれば、あなたが構築しようとしているものに最も適した要素を使うべきです。 ヘッダーとロゴのCANVAS要素よりも、イメージとテキストと共にHEADER要素を使用することをお勧めします。
また、印刷などの非インタラクティブな媒体で使用するWebページまたはアプリケーションを作成する場合、動的に更新されたCANVAS要素が期待どおりに印刷されないことがあることに注意してください。 現在のコンテンツまたは代替コンテンツの印刷物を得ることができます。