コメント：Canvas <Canvas>とは、HTML5で定義されている新しいHTML要素です。この要素は通常、GavaScriptを介してHTMLページでグラフィックを描画したり、画像を合成するなどに使用したり、アニメーションを作成するために使用できます。もちろん、現在HTML5です
キャンバスとは何ですか
<canvas>は、HTML5で定義されている新しいHTML要素です。この要素は通常、GavaScriptを介してHTMLページでグラフィックを描画したり、画像を合成するなどに使用したり、アニメーションを作成するために使用できます。もちろん、HTML5仕様はまだドラフト段階にあり、2010年まで公式にリリースされるまでにかかる場合がありますが、現在では多くのブラウザがすでにいくつかのHTML5仕様をサポートしています。現在、Canvas要素をサポートするブラウザにはFirefox3+、Safari4、Chrome 2.0+などが含まれているため、このページで例を実行するときは、上記のブラウザのいずれかを使用していることを確認してください。
モジラのキャンバスに関するチュートリアルがたくさんありましたが、学習プロセスを記録することにしました。私が十分に理解していないと思われる場合は、Mozilla WebサイトのCanvasチュートリアルへのリンクを参考資料のリンクを見つけることができます。
また、いくつかの興味深いキャンバスの例はここにあります。
キャンバスを始めましょう
キャンバスの使用は簡単です。他のHTML要素を使用するのと同じように、ページに<canvas>タグを追加するだけです。
<canvas> </canvas>
もちろん、これは単なるキャンバスオブジェクトの単純な作成であり、操作を実行しません。この時点で、キャンバス要素はdiv要素と変わりません。ページには何も見られません:)
さらに、Canvas要素のサイズは、IMG要素に多少似た幅と高さの属性によって指定できます。
Canvasのコア：コンテキスト
前述のように、JavaScriptを介してキャンバスオブジェクトを操作してグラフィックス、合成画像などを描画できます。これらの操作は、Canvasオブジェクト自体を介して実行されるのではなく、Canvasオブジェクトのメソッドを介して実行され、Canvas操作コンテキストを取得するためにContextを取得します。言い換えれば、Canvasオブジェクトを使用するプロセスでは、Canvasオブジェクトのコンテキストを扱い、Canvasオブジェクト自体を使用してCanvasオブジェクトのサイズなどの情報を取得できます。
Canvasオブジェクトのコンテキストを取得するのは非常に簡単です。 Canvas要素のgetContextメソッドを呼び出すだけです。呼び出すときは、コンテキストタイプパラメーターを渡す必要があります。使用できる、使用できる唯一のタイプ値は2Dです。
Firefox3.0.xの恥ずかしさ
firefox3.0.xはキャンバス要素をサポートしていますが、仕様に従って完全には実装されていません。仕様の塗りつぶしと測定テキストのメソッドは、Firefox3.0.xのいくつかのFirefox固有のメソッドに置き換えられます。したがって、firefox3.0.xでキャンバスを使用する場合、最初にこれらのメソッド間の違いを異なるブラウザーで修正する必要があります。
次のコードは、firefox3.0.xのキャンバスのコンテキストオブジェクトとHTML5仕様の間の矛盾を修正するMozillabespinプロジェクトから取得されます。
注：Opera 9.5まで、OperaはCanvasオブジェクトの塗りつぶしと、HTML5仕様の関連する方法とプロパティをサポートしていません。
こんにちは、キャンバス！
キャンバスの予備的な理解の後、私たちは最初のキャンバスプログラム、有名なHelloworld Hello、Canvas：
例を実行します。キャンバスオブジェクトが位置する領域は、CTX.FillText（Hello、World！、20,20）の機能であるHello、World！を示しています。コードで。
フィルテキストと関連プロパティ
filltextメソッドは、キャンバスにテキストを表示するために使用されます。 4つのパラメーターを受け入れることができます。最後のパラメーターはオプションです。
voidfilltext（indomstringtext、infloatx、infloaty、[optional] infloatmaxwidth）;
ここで、MaxWidthはテキストを表示するときに最大幅を表します。これにより、テキストが溢れるのを防ぎます。しかし、私のテストでは、FirefoxとChomreでMaxWidthを指定するときにMaxWidthが効果的ではないことがわかりました。
FillTextメソッドを使用する前に、コンテキストのフォントプロパティを設定して、テキストのフォントを調整できます。上記の例では、テキストのフォントとして20ptarialを使用しました。さまざまな値を設定して、特定の効果を確認できます。
仕上げる
今のところすべてです。仕様を読んでいる間、このシリーズを書きます:)
参照
1。HTML5キャンバス、スクリプト言語の新しい段階、hred
2。
3。CanvastutorialChinese、Mozilla
4.Canvastutorial English、Mozilla
5.Canvassupportinopera、オペラ