Canvas ゲーム開発学習パート 1: タグの最初の紹介

要素の定義から始めましょう。

<canvas id="myCanvas" width="150" height="150"></canvas>

は に非常に似ていますが、唯一の違いは、src
属性と alt
属性が含まれていないことです。プロパティは幅と高さの 2 つだけで、どちらもオプションであり、DOM または CSS を使用して設定できます。幅と高さが指定されていない場合、デフォルトは幅 300 ピクセル、高さ 150 ピクセルです。キャンバスのサイズは CSS を通じて変更できますが、レンダリングされたイメージはレイアウトに合わせて拡大縮小されます (レンダリング結果が歪んで見える場合は、CSS だけに依存するのではなく、キャンバスの幅と高さのプロパティを明示的に指定してみてください)。 終了タグは必須です。

要素は、通常の画像と同様にスタイル (余白、境界線、背景など) を指定できます。ただし、これらのスタイルは、キャンバスによって生成される実際の画像には影響しません。次にスタイルを適用する方法を見ていきます。スタイルが指定されていない場合、キャンバスはデフォルトで完全に透明になります。


は比較的新しく、Firefox 1.0 や Internet Explorer など一部のブラウザでは実装されていないため、キャンバスをサポートしていないブラウザには代替の表示コンテンツを提供する必要があります。置換コンテンツを直接 Canvas 要素に挿入するだけです。 Canvas をサポートしていないブラウザは Canvas 要素を無視して代替コンテンツを直接表示しますが、Canvas をサポートしているブラウザは通常どおり Canvas を表示します。たとえば、代替コンテンツとしてテキストや画像をキャンバスに埋め込むことができます:

<canvas id="game" width="150" height="150">
  Oh dear, your browser dosen&#39;t support HTML5! Tell you what, why don&#39;t you upgrade to a decent browser - you won&#39;t regret it!</canvas>

<canvas id="clock" width="150" height="150">
  <imgsrc="images/clock.png" width="150" height="150"/>
</canvas>

作成された固定サイズの描画画面は 1 つ以上のレンダリング コンテキスト (レンダリング コンテキスト) を開き、どのようなコンテンツを制御するかを渡すことができます。表示されています。現在唯一のオプションである 2D レンダリングに重点を置いており、将来的には OpenGL ES ベースの 3D コンテキストを追加する可能性があります。

は最初は空白です。スクリプトを使用して画像を描画するには、まずそのレンダリング コンテキストが必要です。これは、canvas 要素オブジェクトの getContext
メソッドを通じて取得できます。描画のためのいくつかの機能。 getContext()
は、その型を記述する値をパラメータとして受け入れます。 getContext() は CanvasRenderingContext2D オブジェクトを返します。

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

上記の最初の行は、getElementById メソッドを通じて Canvas オブジェクトの DOM ノードを取得します。次に、 getContext
メソッドを通じて描画操作コンテキストを取得します。

キャンバスをサポートしていないブラウザに代替コンテンツを表示することに加えて、スクリプトを使用してブラウザがキャンバスをサポートしているかどうかを確認することもできます。方法は非常に簡単で、getContext
が存在するかどうかを判定するだけです。

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

次の最も単純なコード テンプレートから始めます (これは後続の例で使用されます)。

  
    
    
    
  
  
    <canvas id="myCanvas" width="150" height="150"></canvas>
  

注意して見ると、ページがロードされた後に一度実行されるdraw
という関数が用意されていることがわかります。もちろん、それも可能です。他のイベント処理関数で呼び出されます。

上記は、キャンバス ゲーム開発学習のパート 1 です。 タグの内容について詳しくは、PHP 中国語 Web サイト (www.php.cn) をご覧ください。 ！