遊びながらHTML5を学ぶ(1) - キャンバスの詳細説明

width = "750" キャンバスと同様に、すべてのグラフィック描画は最終的にこのキャンバス上に表示されます。このタグにより、ブラウザのグラフィックス パフォーマンスが大幅に向上しました。

ニュース リンク: では、赤い四角の領域が表示されます。 2. コンテキストのレンダリング実際、Windows

Google は、Chrome 7 ブラウザが 60 倍高速になると主張しています <canvas>标签的用法非常简单，如下： <canvas id="tutorial" width="150" height="150" style="background-color:red;"> 你的浏览器不支持 Canvas 标签</canvas> < ;canvas> タグは通常の HTML タグとほとんど変わりません。幅と高さを設定でき、CSS を通じて背景色や境界線のスタイルなどを設定できます。 タグの詳細については、 こちらをご覧ください。 タグの中央のコンテンツは 置換コンテンツ です。ユーザーのブラウザが タグをサポートしていれば、このコンテンツが表示されます。の場合、このコンテンツは無視されます。 上記の コードは、

を使用している場合にのみ表示されます。 Google Chrome または Firefox

プログラミング

を使ったことのある生徒は、まずデバイスを取得する必要があることを知っています。 context DC では、 タグ上に描画する場合も、最初にレンダリング コンテキストを取得する必要があります。グラフィックスは画面に直接描画されず、まずコンテキスト (Context) に描画され、その後画面に更新されます。

本題から外れました: なぜ「コンテキスト」などという複雑な概念を作成する必要があるのでしょうか?コンテキスト

オブジェクト

のおかげで、私たちは描画だけに集中すればよく、他の作業はオペレーティング システムとブラウザに任せることができます。さまざまな具体を統一された抽象概念に変換し、それによって私たちの負担を軽減します。 コンテキストの取得は非常に簡単で、次の 2 行のコードが必要です:

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

まず Canvas オブジェクトを取得し、次に Canvas オブジェクトの getContext メソッドを呼び出します。このメソッドは現在、パラメーター「2d」のみを渡すことができます。 」、近い将来にサポートされる可能性がありますパラメータ「3d」、それが何を意味するか知っておく必要があります。楽しみにしましょう。

getContext メソッドは、レンダリング コンテキスト オブジェクトである CanvasRenderingContext2D オブジェクトを返します。詳細については、こちら

のいくつかの描画メソッドを参照してください。

3. ブラウザのサポート

サポートされていないブラウザで代替コンテンツを表示することに加えて、スクリプトを使用してブラウザがキャンバスをサポートしているかどうかを確認することもできます。メソッドは非常に簡単で、getContext Function が存在する必要があると判断します。 、コードは次のとおりです:

var canvas = document.getElementById('tutorial'); 
if (canvas.getContext){ 
    alert("支持 <canvas> 标签"); 
} else { 
    alert("不支持 <canvas> 标签");

以上が遊びながらHTML5を学ぶ(1) - キャンバスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。