Html5 Canvas 事前学習メモ(1) - 長方形を描く

canvas 要素は、以前の Html と比較した Html5 の新機能です。このブログ投稿では、このコンポーネントのアプリケーション、特に Web ゲーム開発におけるアプリケーションについて研究します。

canvas コンポーネントは、table や p などの以前のコンポーネントと似ており、外部プラグインなしで実行できます。 htmlを使用して、グラピクスおよびのdroidのgrapi（2drederncontextapi）を使用して、androidのg2medeverymentを使用してください。独自のメソッドを呼び出して描画できます。

canvas

を次のように定義できます:

<canvas id="canvas" width="400" height="400"> </canvas>

Canvasは2D

レンダリングコンテキストのラッパーです。 2D レンダリングコンテキストはcanvascanvasに基づく「ブラシ」。左上隅を原点とする平面デカルト座標系 (0、0) を使用します。右に移動すると、xの座標値が増加し、下に移動すると、yの値が増加します。これは、j2meキャンバスと非常によく似ています。 さて、いくつかの基本概念を紹介した後、最初の Html5 Canvas
を構築します。最初のレンダリングは次のとおりです

。

非常に簡単な例以下のコードを見てみましょう:

canvas

のラベルは
canvas

canvasを定義しますが、何も処理せずに、ラベルスクリプトを定義します。この部分は js のコード部分で、次の部分はレンダリング コンテキストを取得するためのものです:

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

は最初に canvas 要素を取得し、次に 2d

レンダリング コンテキストを取得します。 次のコードは、長方形の部分を描画するものです:

context.fillStyle = '#000000';
context.fillRect(50, 50, 100, 100);

最初に色を設定し、次に描画する 4 つのパラメーターは、開始点の水平座標と垂直座標、幅と高さです。

上記は、「Html5 Canvas 事前学習ノート (1) - 長方形の描画」の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。