HTML5 Canvas ベース: 文字列、パス、背景、pictures_html5 チュートリアル スキルの詳細な説明

コードをコピーします

コードは次のとおりです:

var context2D = Canvas.getContext(“2d”);

パス

HTML5 Canvas の基本的なグラフィックスはパスに基づいています。通常、Context オブジェクトの moveTo()、lineTo()、rect()、arc() およびその他のメソッドを使用して、最初にキャンバス上のグラフィックのパス ポイントをトレースし、次に fill() またはストローク() メソッドを使用します。グラフィックを塗りつぶすか、パス ラインに従って描画するために使用されます。

通常、パスの描画を開始する前に Context オブジェクトの beginPath() メソッドを呼び出す必要があります。その機能は、以前のパスをクリアし、新しいパスの描画を開始するように Context に通知することです。 ) メソッドが呼び出されると、以前のすべてのパスが描画されます。このパスは描画効果に影響を与え、また操作が繰り返されるため Web ページのパフォーマンスにも影響します。さらに、Context オブジェクトの closePath() メソッドを呼び出すと、現在のパスを明示的に閉じることができますが、パスはクリアされません。

パスを描画するいくつかのメソッドのプロトタイプを次に示します:

void moveTo(x, y);

はパスの開始点を明示的に指定するために使用されます。デフォルトでは、最初のパスの始点はキャンバスの (0, 0) 点で、後続の始点は前のパスの終点になります。 2 つのパラメーターは、開始点を表す x 座標値と y 座標値に分割されます。

void lineTo(x, y);

は始点から指定した位置まで直線のパスを描画します。描画が完了すると、描画した始点が指定した位置に移動します。パラメーターは、指定された位置の x および y 座標値を表します。

void Rect(左、上、幅、高さ);

は、左上の頂点の位置、幅、高さが既知の四角形を描画するために使用されます。描画が完了すると、Context の描画開始点が四角形の左上の頂点に移動します。パラメータは、長方形の左上隅の x 座標と y 座標、および長方形の幅と高さを表します。

void arcTo(x1, y1, x2, y2,radius);

は、2 つの線分に接する円弧を描くために使用されます。2 つの線分は、現在のコンテキスト描画の開始点と (x2, y2) 点を開始点として取り、両方とも (x1, y1) で終了します。 ) 円弧の半径は半径です。描画が完了すると、(x2,y2)を起点として線分と円弧の接点に描画開始点が移動します。

void arc(x, y, radius,startAngle, endAngle,反時計回り);

は、(x, y) 点を中心、radius を半径、startAngle を開始ラジアン、endAngle を終了ラジアンとする円弧を描くために使用されます。 anti時計回りはブール値パラメータで、true は反時計回り、false は時計回りを意味します。パラメータ内の 2 つのラジアンは 0° で表され、その位置は 3 時の位置です。Math.PI 値は 180° を表し、その位置は 9 時の位置です。

voidquadraticCurveTo(cpx,cpy, x, y);

は、現在のコンテキスト描画開始点を始点、(cpx, cpy) 点を制御点、(x, y) 点を終点とする二次スプライン パスを描画するために使用されます。

void bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);

は、現在のコンテキスト描画開始点を開始点として、(cpx1, cpy1) 点と (cpx2, cpy2) 点を 2 つの制御点として、(x, y) 点を使用してベジェ曲線パスを描画するために使用されます。終点。

パスの描画が完了したら、Context オブジェクトの fill() メソッドと stroke() メソッドを呼び出してパスを塗りつぶし、パスの線を描画するか、clip() メソッドを呼び出して Canvas 領域をクリップする必要があります。上記 3 つのメソッドのプロトタイプは次のとおりです。

ボイドストローク();

既存のパスに従って線を描画するために使用されます。

void fill();

現在の塗りつぶしスタイルを使用してパスの領域を塗りつぶすために使用されます。

void Clip();

既存のルートに従ってキャンバス内のクリッピング領域を設定するために使用されます。 Clip() メソッドを呼び出した後は、グラフィックス描画コードはクリッピング領域内でのみ有効となり、領域外のキャンバスには影響を与えなくなります。呼び出し前にパスが描画されていない場合 (つまり、デフォルトの状態の場合)、結果のクリッピング領域は Canvas 領域全体になります。

さらに、Context オブジェクトは、以下に示すように、線と塗りつぶしのスタイルを調整するための対応するプロパティも提供します。

ストロークスタイル

fillStyle

lineWidth

ラインキャップ

ライン参加

miterLimit