キーテイクアウト

• HTML5 Canvasは、開発者がJavaScriptを使用してブラウザ內(nèi)で直接グラフィックを描畫し、アニメーションを作成できる強力なテクノロジーです。 Canvas要素は、幅と高さの屬性を使用してHTMLコードで定義されており、その実際のパワーはHTML5 Canvas APIを介して活用されています。
HTML5 Canvas機能はインタラクティブで、アニメーションが可能で、柔軟性があり、すべての主要なブラウザでサポートされています。ゲーム、広告、データ表現(xiàn)、教育とトレーニング、アートと裝飾など、さまざまなアプリケーションに使用できます。
• HTML5キャンバスを使用するには、開発者がHTML5キャンバスサポートを備えたブラウザを必要とします。キャンバス要素はHTMLで作成され、JavaScriptは、ダイナミックグラフィックスの生成を可能にする一連の描畫関數(shù)を介してキャンバス領(lǐng)域にアクセスするために使用されます。
HTML5 Canvasには、キャンバスの左上隅に原點が配置される一意の座標(biāo)系があります。 X座標(biāo)は右に増加し、Y座標(biāo)はキャンバスの底に向かって増加します。このシステムには目に見える負(fù)のポイントがないため、負(fù)の座標(biāo)ポイントを使用して配置されたオブジェクトはページに表示されません。
CSSアニメーションに興味がありますか？ CSSを使用したアニメーションの作成をご覧ください。CSSの完全なコース、およびSitePointメンバーが利用できる専門家のWeb開発者Donovan Hutchinsonによるキーフレームアニメーションをご覧ください。 HTML5 Canvasアニメーションのサンプルについては、以下のHTML5キャンバスのイラストをご覧ください。これは、HTML5 Canvas Miniコースでアニメーション化するスタートの1つのビデオです。 プレーヤーをロードする…
• 畫家のツールキットで最も重要な楽器の1つは、キャンバスです。それは、ほとんど無制限のバリエーションと組み合わせで、あらゆる種類の感情、印象、アイデアなどを自由に表現(xiàn)する自由を與えます。そして、その自由は、彼らのスキルレベルと彼らの想像力という2つのことによってのみ制限されることができます。

html5キャンバスとは？

Canvas要素は、幅と高さの屬性を使用してHTMLコードで定義された要素です。ただし、Canvas要素の真のパワーは、HTML5 Canvas APIを利用することで達(dá)成されます。このAPIは、描畫関數(shù)の完全なセットを介してキャンバス領(lǐng)域にアクセスできるJavaScriptを作成することで使用されているため、動的に生成されたグラフィックが可能になります。

• インタラクティブ。キャンバスは完全にインタラクティブです。キーボード、マウス、またはタッチイベントを聞くことで、ユーザーのアクションに応答できます。したがって、開発者は靜的グラフィックと畫像のみに制限されていません。
アニメーション。キャンバスに描かれたすべてのオブジェクトはアニメーション化できます。これにより、単純なバウンスボールから複雑な前方および逆運動學(xué)まで、あらゆるレベルのアニメーションを作成できます。
• 柔軟性。開発者は、キャンバスを使用してほぼすべてを作成できます。アニメーションの有無にかかわらず、線、形、テキスト、畫像などを表示できます。さらに、キャンバスアプリケーションにビデオやオーディオを追加することも可能です。
ブラウザ/プラットフォームサポート。 HTML5キャンバスは、すべての主要なブラウザでサポートされており、デスクトップ、タブレット、スマートフォンなどの幅広いデバイスでアクセスできます。
• 人気。キャンバスの人気は急速かつ著実に成長しているため、利用可能なリソースの不足はありません。
これはWeb標(biāo)準(zhǔn)です。 FlashやSilverlightとは異なり、CanvasはHTML5の一部であるオープンテクノロジーです。また、その機能のすべてがすべてのブラウザに実裝されているわけではありませんが、開発者は特定のキャンバスが無期限に存在する可能性があります。
• 1回開発し、どこでも実行します。 HTML5キャンバスは素晴らしい攜帯性を提供します。 FlashやSilverlightとは異なり、作成されたら、最大のコンピューターから最小のモバイルデバイスまで、キャンバスアプリケーションはほぼどこでも実行できます。
無料でアクセス可能な開発ツール。 HTML5 Canvasアプリケーションを作成するための基本的なツールは、単なるブラウザであり、優(yōu)れたコードエディターです。さらに、高度なキャンバス開発を行う開発者を支援するための多くの優(yōu)れた無料ライブラリとツールがあります。
HTML5キャンバスでどのアプリケーションを作成できますか？
わかりました、キャンバスは素晴らしいです。しかし、それを正確に使用できるのは何ですか？見てみましょう。
• ゲーム。 HTML5 Canvasの機能セットは、あらゆる種類の2Dおよび3Dゲームを生産する理想的な候補者です。
広告。 HTML5キャンバスは、フラッシュベースのバナーと広告に最適な代替品です。バイヤーの注意を引き付けるために必要なすべての機能があります。

データ表現(xiàn)。 HTML5は、グローバルデータソースからデータを収集し、それを使用して、視覚的に魅力的でインタラクティブなグラフとCanvas要素を生成できます。

教育とトレーニング。 HTML5キャンバスは、テキスト、畫像、ビデオ、オーディオを組み合わせて、効果的で魅力的な學(xué)習(xí)體験を作成するために使用できます。

Canvasレンダリングコンテキスト

コンテキストが必要です。コンテキストは、使用するHTML5 Canvas APIを定義します。 2Dコンテキストは、2Dグラフィックスの描畫とビットマップ畫像の操作に使用されます。 3Dコンテキストは、3Dグラフィックの作成と操作に使用されます。後者は実際にはwebglと呼ばれ、opengl esに基づいています。 始めましょう

キャンバスを始めるには、必要なのはコードエディターとHTML5キャンバスサポートを備えたブラウザだけです。崇高なテキストとグーグルクロムを使用していますが、必要なものは何でも使用できます。

そして、ここに私たちのJavaScriptがあります。これをHTMLページの下部に含めることができます：

<span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
</span>
  <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
</span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
</span>    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.<span><span><span></p</span>></span>
</span>
  <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
</span><span>                 if the browser doesn't support canvas -->
</span>
<span><span><span></canvas</span>></span></span>

デフォルトでは、ブラウザは、幅300ピクセルと高さ150ピクセルのキャンバス要素を作成します。 HTMLで行ったように、幅と高さを指定することでサイズを変更できます。

<span>var canvas = document.getElementById('exampleCanvas'),
</span>    context <span>= canvas.getContext('2d');
</span>
    <span>// code examples will continue here...</span>

<span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
</span>
  <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
</span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
</span>    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.<span><span><span></p</span>></span>
</span>
  <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
</span><span>                 if the browser doesn't support canvas -->
</span>
<span><span><span></canvas</span>></span></span>

以上がHTML5 Canvasチュートリアル：はじめにの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。