コメント：すべてのブラウザが現在HTML5をサポートしているわけではないことを誰もが知っています。 HTML5をサポートするブラウザでさえ、HTML5のすべての新機能をサポートしない場合があります。 Firefox（開発者のお気に入り）またはChromeブラウザを使用することをお勧めします。私の例はすべて、Firefoxに基づいて開発されています。
今日から、HTML5キャンバスに関する一連のコースを開始します。このシリーズは、「HTML5キャンバス：ネイティブインタラクティブ性とWebのアニメーション」を読んだ後の私の要約です。興味のある友達は、読むためにオリジナルの英語の本をダウンロードできます。この本は、キャンバスの開発を導入することにより、キャンバスの強力な機能を示しています。とてもいいと思います。この本を読むことで、キャンバスに関する多くの知識を学びました。実際、キャンバス自体には多くのAPIがありません。重要なのは、それらを積極的に学び、使用し、APIの組み合わせのために信じられないほどの結果を生み出すことです。そして、この本はキャンバスを学ぶためのあなたの最良の選択です。まだ中国語版を持っていないのは残念です。英語が貧弱な友達は待つことができます。誰もが知っているように、すべてのブラウザが現在HTML5をサポートしているわけではなく、HTML5をサポートするブラウザでさえ、必ずしもHTML5のすべての新機能をサポートするとは限りません。したがって、誰もがデバッグ環境として比較的新しいブラウザを選択する必要があります。 Firefox（開発者のお気に入り）またはChromeブラウザを使用することをお勧めします。私の例はすべて、Firefoxに基づいて開発されています。
ここでは、HTML5に関連する基本的な知識を紹介しません。インターネットにはHTML5に関する多くのチュートリアルがあるので、自分で学ぶことができます。 HTML5を学ぶには、JavaScriptのより良い基盤を持つ必要があります。トムおじさんのブログにアクセスして学習できます。実際、この一連のコースは非常に困難です。 50を超える記事をよく勉強している場合は、JSの専門家と見なされる必要があります。
次に、Canvasコースを正式に開始します。最初の例：Hello Canvas。
まず、次のように、体内にキャンバスタグを追加する必要があります。
<canvas>
ブラウザはHTML5キャンバスをサポートしていません。
</canvas>
ブラウザがキャンバスオブジェクトをサポートしていない場合、キャンバスのテキストパーツが表示されます。
キャンバスタグが定義されています。 JSを介して操作する必要がある場合、GetElementByIDを介して実装できます。
var thecanvas = document.getElementById（Canvasone）;現在、jqueryを使用してタスクを開発することに慣れているので、jQueryを使用してキャンバスオブジェクトを取得するにはどうすればよいですか？
var canvas = $（ '＃canvasone'）。get（0）;またはvar canvas = $（ '＃canvasone'）[0]; Get（0）と[0]が持っていないことがわかりません。 get（）メソッドまたは[] subscriptを使用しない場合、JSコードは正常にキャンバスを動作させることができません。 $（ '＃canvasone'）がjQueryオブジェクトを取得し、実際に操作したいのはHTML DOMオブジェクトです。 jQueryオブジェクトがdomオブジェクトに変換され、この変換がget（）またはsubscriptによって完了する問題があります。 DOMオブジェクトをjQueryオブジェクトに変換する必要がある場合は、$（）メソッドを使用して実装できます。それについて明確ではない私の友人は、自分でバイドゥに行く唯一の人がいるので、私はここで深く入りません。
コードの堅牢性を確保するために、ブラウザが次のコードで実装できるCanvasオブジェクトをサポートするかどうかを判断する必要があります。
if（！thecanvas ||！thecanvas.getContext）{
戻る;
}
ただし、Modernizr.jsライブラリを使用してこの作業を完了することをお勧めします。これは非常に受動的なHTML5 JSライブラリであり、多くの有用な方法を提供します。
function canvassupport（）{
Modernizr.Canvasを返します。
}
Canvasは2Dレンダリングをサポートし、次のコードを通じて実装されています。
var context = thecanvas.getContext（2d）;
次に、コンテキストオブジェクトを介してキャンバスに画像を描画できます。
//エリアの色を設定します
context.fillstyle = "#ffffa";
//エリアを描きます
Context.FillRect（0、0、500、300）;
//フォントを設定します
context.font = "20px _sans";
//垂直アライメントを設定します
Context.TextBaseLine = "TOP";
//テキストを描画します
context.filltext（ "Hello World！"、195、80）;
//ボーダーカラーを設定します
Context.Strokestyle = "＃000000";
//ボーダーを引きます
Context.Strokerect（5、5、490、290）;
写真の図面を以下に説明します。画像の非同期ダウンロードにより、キャンバスで画像を描くときに画像がダウンロードされるようにするために、次の方法を使用します。
var helloworldimage = new Image（）;
helloworldimage.src = "helloworld.gif";
helloworldimage.onload = function（）{
Context.Drawimage（Helloworldimage、160、130）;
}
画像が終了すると、オンロードイベントがトリガーされ、コンテキストオブジェクトを使用して画像が描画されます。
全員がデモをダウンロードして、完全なコードを表示します。デモのダウンロードアドレス：html5canvas.helloworld.zip