検索

ホームページ >ウェブフロントエンド >jsチュートリアル >HTML5 Canvasチュートリアル：はじめに

HTML5 Canvasチュートリアル：はじめに

Christopher Nolan
Christopher Nolanオリジナル
2025-02-22 09:06:38269ブラウズ

HTML5 Canvasチュートリアル：はじめに

キーテイクアウト

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

html5キャンバスとは？

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

HTML5キャンバスの何がとても素晴らしいですか？

ここにいくつかの理由があります。HTML5のキャンバス機能を使用することを学習することを検討したい場合：

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

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

芸術と装飾。少しの想像力とキャンバスのさまざまな色、勾配、パターン、透明性、影、クリッピング機能により、あらゆる種類の芸術的で装飾的なグラフィックを描画できます。

キャンバスを学ぶべき理由がわかったので、HTML5キャンバスの基本とそれを使用する方法を見てみましょう。

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

すべてのHTML5キャンバス要素には、

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

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

開始するhtmlは次のようになります：

そして、ここに私たちの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で行ったように、幅と高さを指定することでサイズを変更できます。

また、JavaScriptで使用するID属性をCanvasに与えたことに注意してください。そして最後に、必要に応じて、CSSを使用して境界線を追加して、薄いフレームによってキャンバスを表示できるようにすることができます。これは必須ではありません。キャンバス要素の境界を確認するための視覚補助剤として使用されています。 
<span>var canvas = document.getElementById('exampleCanvas'),
</span>    context <span>= canvas.getContext('2d');
</span>
    <span>// code examples will continue here...</span>
オープニングとクロージングタグの間に、ブラウザがキャンバスをサポートしていない場合に表示されるコンテンツを追加したことに注意してください。これは、古いブラウザがサポートするあらゆるタイプのコンテンツになることがあります。

JavaScriptは2行で始まります。最初の行では、IDを介してキャンバス要素をキャッシュする変数を作成します。 2番目の行は、getContext（）関数を使用してキャンバスの2Dコンテキストを参照する変数（コンテキスト）を作成します。コンテキスト変数を使用して、すべてのキャンバスの描画関数とプロパティにアクセスします。

キャンバスが準備ができているので、キャンバスAPIの実験を開始できます。しかし、その前に、Canvas機能のいくつかの側面を明確にしましょう。

HTML5キャンバス要素サイズvs.描画サーフェスサイズ

Canvas Elementの幅と高さの属性に加えて、CSSを使用してCanvas要素のサイズを設定することもできます。ただし、CSSを使用してキャンバス要素をサイジングすることは、要素の幅と高さの属性を設定することと同じではありません。これは、キャンバスに実際に2つのサイズがあるためです。要素自体のサイズと要素の描画表面のサイズです。

要素の幅と高さの属性を設定すると、要素のサイズと要素の描画表面のサイズの両方を設定します。ただし、CSSを使用してキャンバス要素をサイズすると、描画面ではなく、要素のサイズのみを設定します。キャンバス要素のサイズが描画表面のサイズと一致しない場合、ブラウザは要素に合うように描画表面を拡張します。このため、CSSを使用する代わりに、Canvas Elementの幅と高さの属性を使用して要素のサイズを使用することをお勧めします。

Canvas座標系の理解

2Dスペースでは、xおよびy座標を使用して位置が参照されます。 x軸は水平に伸び、y軸は垂直に伸びます。中心には位置x = 0とy = 0があり、（0、0）として表現できます。数学で使用されるオブジェクトを配置するこの方法は、デカルト座標系として知られています。 ただし、Canvas座標系は、X座標が右に増加し、Y座標がキャンバスの底に向かって増加すると、キャンバス座標系をキャンバスの左上隅に配置します。したがって、標準のデカルト座標空間とは異なり、キャンバス空間には目に見える負のポイントがありません。負の座標を使用してもアプリケーションに失敗することはありませんが、ネガティブコーディネートポイントを使用して配置されたオブジェクトはページに表示されません。

基本的なキャンバスの例

前述のように、HTML5キャンバスは、行、曲線、パス、形状、テキストなど、多くの種類のオブジェクトを作成します。 Canvas APIについては詳細に説明しません。これらは、キャンバスの仕組みを感じるのに役立つのに役立ちます。

HTML5 Canvasチュートリアル：はじめに描画線

行を描くには、4つのCanvas APIメソッドを使用します。ブラウザに新しいパスを描画するように指示するbeginPath（）メソッドから始めます。次に、Moveto（x、y）メソッドを使用して、ラインの開始点を設定します。次に、Lineto（x、y）メソッドはエンディングポイントを設定し、2つのポイントを接続してラインを描画します。

この時点で行が描画されますが、それでも目に見えません。目に見えるようにするために、stroke（）メソッドを使用して、デフォルトの黒い色のラインを表示します。

CodepenのSitePoint（@SitePoint）によるペンキャンバスラインの例を参照してください。

rectangle

を描画します

長方形を描くには、fillrect（x、y、幅、高さ）メソッドを使用して座標と寸法を設定し、fillstyleプロパティを塗りつぶします。

codepenのSitePoint（@sitepoint）のペンキャンバス長方形の例を参照してください。

長方形が左上隅の近くに配置されていることに注意してください。

<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>
テキストを描画

キャンバスにテキストを描画するには、FillText（String、X、Y）とFontプロパティを使用して、テキストのフォント、サイズ、およびスタイルを設定できます（CSSのフォントの速記に似ています）。

CodepenのSitePoint（@SitePoint）によるペンキャンバステキストの例を参照してください。

HTML5 Canvas APIを使用した単純な描画は簡単ですが、複雑な形状とアニメーションを作成するには数学と物理学の知識が必要であることに注意する必要があります。このトピックに関する最高の本の1つは、JavaScriptを使用したFoundation HTML5アニメーションです。この本は、シンプルなアニメーションから複雑なアニメーションまで、物事を動かすことを学ぶための素晴らしいリソースです。

詳細については？

ここで学びたい場合は、いくつかのリソースがあります：

    Canvasチュートリアル - MDNに関する優れたチュートリアル、例、イラスト、詳細な説明がいっぱい。
  • HTML5 Canvas Element Guide - 6つのリビジョンからの初心者のチュートリアル。
    • HTML5 Canvasチュートリアル - KineticJS Canvas Libraryの作成者であるEric Rowellが作成したチュートリアルのフルセット。すべての例はインタラクティブです。あなたは彼らと遊んで、すぐに結果を見ることができます。
  • キャンバス開発をスピードアップ
    • 「生」HTML5 Canvas APIを使用して扱うことは、退屈な仕事になる可能性があります。そのため、スピードアップしてキャンバス開発をはるかに簡単にすることができる良いキャンバスライブラリに切り替えるのがよく学ぶのは良い考えです。
ここにいくつかの一般的な選択肢があります：

kineticjs

paper.js

    easeljs
    • fabric.js
    • ocanvas
  • HTML5キャンバス開発をスピードアップする別の方法は、Adobe IllustratorのAi-> Canvasプラグインを使用することです。 SitePointのこの記事のプラグインの概要を見つけることができます。
    • 結論
    • それだけです。この紹介HTML5 Canvasチュートリアルが、この強力なテクノロジーの学習と探索を継続するための良い出発点を提供することを願っています。 HTML5キャンバス
に関するよくある質問（FAQ） SVG（スケーラブルベクターグラフィックス）とHTML5キャンバスは、両方ともグラフィックを作成するために使用されるWebテクノロジーです。ただし、アプローチとユースケースは異なります。 SVGは、各描画形状がオブジェクトとして記憶されるベクトルベースのアプローチです。オブジェクトの属性が変更された場合、ブラウザはシーンを自動的に再レン​​ダリングできます。 SVGは、インタラクティブなグラフィックと要素のアニメーションに最適です。一方、HTML5キャンバスはピクセルベースです。形状が描かれると、システムによって忘れられます。属性が変更された場合、シーン全体とともに再描画する必要があります。これにより、キャンバスはグラフィック集約型ゲームや写真編集ソフトウェアなどのアプリケーションに最適になります。 FillText（Text、X、Y）メソッドを使用できます。ここで、テキストは書きたい文字列であり、xとyはテキストが開始される座標です。また、フォントとフィルスタイルのプロパティを使用して、テキストのフォント、サイズ、色をカスタマイズすることもできます。

ゲーム開発にHTML5キャンバスを使用できますか？

はい、HTML5キャンバスは2Dゲーム開発に人気のある選択肢です。そのピクセルベースの性質により、ブラウザでスムーズに実行される複雑でグラフィック集約型のゲームを作成するのに適しています。ただし、3Dゲームの場合、Canvas APIを使用するWebGLは、ハードウェアアクセラレーション機能のためにより良い選択になります。形状を描くためのいくつかの方法を提供します。たとえば、長方形を描画するには、FillRect（x、y、幅、高さ）メソッドを使用できます。円を描くには、ARC（x、y、radius、startangle、endangle）メソッドを使用できます。また、パスを使用して複雑な形状を描画することもできます。

HTML5キャンバスでオブジェクトをアニメーション化するにはどうすればよいですか？ 2番。各redRawはフレームと呼ばれ、オブジェクトのプロパティの変更はフレーム間で行われ、動きの幻想を作成します。これは通常、RequestAnimationFrame（）メソッドを使用して行われます。 ​​

HTML5キャンバスでのエラー処理は、通常、JavaScriptのTry-Catchブロックを使用して行われます。ただし、Canvasは低レベルのAPIであるため、詳細なエラーメッセージは提供されません。したがって、デバッグは困難な場合があり、多くの場合、多くの試行錯誤が含まれます。

以上がHTML5 Canvasチュートリアル：はじめにの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 firefox css chrome safari html edge express Static String Object Resource if switch for format include try catch Error continue using finally Attribute Property Event JS function default this display position border animation canvas idea sublime text fabric webgl Access Foundation Game Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptコアオブジェクトの拡張次の記事：JavaScriptコアオブジェクトの拡張

関連記事

続きを見る