HTML5のキャンバスタグとは何ですか？

HTML5 の Canvas タグは「」です。 Canvas タグはグラフィックの描画に使用されます。これは単なる長方形のグラフィック コンテナです。グラフィックの描画はスクリプト (通常は JavaScript) を通じて行う必要があります。開発者はさまざまな JS メソッドを使用して、パス、ボックス、円、文字を描画したり、画像を追加したりできます。もっと。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 の Canvas タグは「」です。

canvas タグはグラフィックの描画に使用されます。これは単なる長方形のグラフィック コンテナです。グラフィックの描画はスクリプト (通常は JavaScript) を通じて行う必要があります。

開発者は、キャンバスを使用して、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。

キャンバスの作成 (Canvas)

キャンバスは、Web ページ内の長方形のフレームであり、 要素によって描画されます。

注: デフォルトでは、 要素には境界線もコンテンツもありません。

簡単な例は次のとおりです。

<canvas id="myCanvas" width="200" height="100"></canvas>

注: 通常、タグでは id 属性 (スクリプトで参照されることが多い)、つまり、 width 属性と height 属性。

ヒント: HTML ページでは複数の 要素を使用できます。

style 属性を使用して境界線を追加します:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

##JavaScript を使用して画像を描画する

canvas 要素自体には描画機能がありません。すべての描画作業は JavaScript 内で行う必要があります:

HTML コード:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

javascript コード:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

分析例:

まず、 要素を見つけます:

var c=document.getElementById("myCanvas");

次に、コンテキスト オブジェクトを作成します:

var ctx=c.getContext("2d");

getContext("2d") このオブジェクトは、パス、四角形、円、文字を描画し、画像を追加するための複数のメソッドを備えた組み込みの HTML5 オブジェクトです。

次の 2 行のコードは、赤い四角形を描画します。

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

fillStyle プロパティを CSS カラー、グラデーション、またはパターンに設定します。 fillStyle のデフォルト設定は #000000 (黒) です。

fillRect(x,y,width,height) メソッドは、四角形の現在の塗りつぶし方法を定義します。

キャンバス座標

キャンバスは 2 次元のグリッドです。

キャンバスの左上隅の座標は (0,0)です。

上記の fillRect メソッドにはパラメータ (0,0,150,75) があります。

意味: キャンバス上に左上隅 (0,0) から開始して 150 × 75 の長方形を描画します。

座標の例

下の図に示すように、キャンバスの X 座標と Y 座標を使用して、キャンバス上に絵画を配置します。マウスを移動した四角枠上に位置座標が表示されます。

#キャンバス パスキャンバス上に線を描画するには、次の 2 つの方法を使用します。

moveTo(x,y) はラインの開始座標を定義します。
lineTo(x,y) はラインの終了座標を定義します
線を描くには、ストローク() と同じように、「インク」メソッドを使用する必要があります。

例:

開始座標 (0) を定義します。 ,0)、および終了座標 (200,100)。次に、ストローク() メソッドを使用して線を描画します。

HTML コード:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>

javascript コード:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

キャンバスに円を描画します。形状を指定するには、次の JavaScript メソッドを使用します:

context.arc(<i>x</i>,<i>y</i>,<i>r</i>,<i>sAngle</i>,<i>eAngle</i>,<i>counterclockwise</i>);

パラメータ値:

##定義と使用法

arc() メソッドは arc/ を作成します。曲線 (円または部分的な円の作成に使用されます)。

ヒント: arc() を使用して円を作成する必要がある場合は、開始角度を 0 に、終了角度を 2*Math.PI に設定してください。

ヒント: キャンバス上に実際の円弧を描画するには、ストローク() メソッドまたは fill() メソッドを使用してください。

#中心: 円弧(100,75,50,0Math.PI,1.5Math.PI)

• 開始角度: 円弧(100,75,50,0,1.5*Math.PI)

• 終了角度: 円弧(100,75,50,0Math.PI,1.5 Math .PI)

• 実際には、円を描画するときに、ストローク() や fill() などの「インク」メソッドを使用します。

  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();

(学習ビデオ共有: html ビデオ チュートリアル 、Web フロントエンド )

以上がHTML5のキャンバスタグとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。