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

キャンバスの作成方法は以下のとおりです。

コードをコピー

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

>

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

お使いのブラウザではCanvas 要素をサポートします。

現在、さまざまなブラウザの新しいバージョンが段階的に HTML5 をサポートし始めているため、使用を開始する前に確認してください。お使いのブラウザが Chrome、Firefox、または IE9 以降のブラウザの新しいバージョンであること。

タグ自体には画像を描画する機能はなく、JavaScript に画像を描画するための領域を提供するだけなので、描画作業は JavaScript で完了する必要があります。描画する前に必要な準備作業は次のとおりです:

コードをコピーします

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

var Canvas = document.getElementById(“canvas”);

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

まず、キャンバス オブジェクトを取得する必要がありますgetContext() メソッドは、キャンバスから 2 次元描画オブジェクトを取得します。 getContext()メソッドのパラメータ「2d」は2次元を意味します（将来的には3次元に拡張されると言われていますが、現在利用可能なパラメータは「2d」のみです）。

取得したContextオブジェクトはHTML5の組み込みオブジェクトであり、JavaScriptで操作することで、Canvasキャンバス上に必要なグラフィックを描画することができます。

文字列

Context オブジェクトの fillText() メソッドを使用して、キャンバスに文字列を描画します。 fillText() メソッドのプロトタイプは次のとおりです:



void fillText(text, left,top, [maxWidth]);



その 4 つのパラメーターの意味は、描画される文字列、キャンバスに描画されるときのキャンバスの左上隅の横座標と縦座標、および描画される文字列の最大長です。最大長 maxWidth はオプションのパラメータです。

さらに、Context オブジェクトのフォント属性を変更することで、文字列のフォントとサイズを調整できます。デフォルトは「10px sans-serif」です。

次の例では、キャンバスに文字列「Hello Canvas!」を表示します (文字列の左上隅がキャンバスの中央にあります)

コードをコピーしますコードは次のとおりです:

お使いのブラウザは Canvas 要素をサポートしていません!

パス

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

ストロークスタイル

線の色。デフォルトは「#000000」です。その値は CSS カラー値、グラデーション オブジェクト、またはパターン オブジェクトに設定できます。

fillStyle

塗りつぶしの色のデフォルトは「#000000」です。ストロークスタイルと同様に、値は CSS カラー値、グラデーション オブジェクト、またはパターン オブジェクトに設定することもできます。

lineWidth

線の幅。単位はピクセル (px) で、デフォルトは 1.0 です。

ラインキャップ

線の終点のスタイルは、バット (なし)、ラウンド (丸い頭)、およびスクエア (四角い頭) の 3 つのタイプから選択できます。デフォルトはバットです。

ライン参加

線の転換点にはラウンド (丸い角)、ベベル (平らな角)、マイター (鋭い角) の 3 つのスタイルがあり、タイプを選択できます。デフォルトはマイターです。

miterLimit

線の鋭い角を折りたたむためのシャープなプログラム。デフォルトは 10 です。

次の例では、上記のメソッドとプロパティの一部を呼び出してグラフィックスを描画します。

コードをコピーしますコードは次のとおりです:

お使いのブラウザは Canvas 要素をサポートしていません!

< ;/canvas>

キャンバスの背景

上記の例では、fillRect() メソッドが呼び出されます。実際、Context オブジェクトには、パスを使用せずにキャンバスにグラフィックを直接描画できる 3 つのメソッドがあります。これは、キャンバスの背景に直接描画すると考えることができます。これら 3 つのメソッドのプロトタイプは次のとおりです:

void fillRect(left, top,width, height);

現在の fillStyle (デフォルトは "#000000"、黒) スタイルを使用して、(左、上) 点に左上隅の頂点を置き、幅は幅、高さは高さで長方形を塗りつぶすために使用されます。

void strokeRect(left, top,width, height);

は、現在の線スタイルを使用して、左上隅の頂点を (左、上) 点に、幅を幅、高さを高さとして持つ長方形の境界線を描画するために使用されます。

void clearRect(left, top,width, height);

左上の頂点が (左、上) 点、幅が幅、高さが高さである長方形領域内のすべてのコンテンツをクリアするために使用されます。

写真

Context オブジェクトには外部画像を Canvas に描画するためのdrawImage() メソッドがあります。 drawImage() メソッドの 3 つのプロトタイプは次のとおりです:

drawImage(image, dx, dy);

drawImage(image, dx, dy,dw, dh);

drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);

次の図は、プロトタイプ内の各パラメーターの意味を示しています。

このうち、image パラメーターは、HTMLImageElement、HTMLCanvasElement、または HTMLVideoElement です。 3 番目のメソッド プロトタイプの sx と sy は、最初の 2 つでは両方とも 0 であり、sw と sh は両方とも画像自体の幅と高さです。2 番目と 3 番目のプロトタイプの dw と dh も最初のプロトタイプにあります。画像自体の幅と高さです。

次の例では、リモート イメージをキャンバスに描画します。

コードをコピーしますコードは次のとおりです。

お使いのブラウザは Canvas 要素をサポートしていません!

上記のコードが渡されますGoogle Chrome 14.0 および Mozilla Firefox 7.0 ブラウザー テストを通じて。