HTML5 Convas API メソッドの詳細な説明_html5 チュートリアル スキル

☆ Canvas.getContext('2d')

キャンバスに直接描画することはできません。このメソッドを使用して、
2 次元空間描画の基礎となるものを取得する必要があります。

☆ context.beginPath()

は、新しいパスの描画を開始することを示します。

☆ context.isPointInPath(x, y)

特定の点がパス上にあるかどうかを判断します。この方法は、座標系が変換された後は機能しません。

☆ context.moveTo(x,y)

は、ブラシを製図板から持ち上げ、ペン先を製図板から離し、ペン先を
(x, y) 座標に配置し、この新しい位置で新しい描画を開始することと同じです。 。

☆ context.lineTo(x, y)

は、ブラシ先端が描画ボードから離れないことに相当します。ブラシ先端は、現在の座標位置から
(x, y) 座標に移動して線分を描画します。

☆ context.ストローク()

キャンバスに描画した後、一部の描画操作ではこのメソッドを呼び出して、描画されたコンテンツ
を表示できるようにする必要があります。

☆ context.save()

このメソッドは、将来の convas への変更に関係なく、convas の現在の状態を保存します。
これらの変更を行う前に convas の状態を保存している限り、
context.restore を呼び出すことができます。 () メソッドを使用して、後で保存した状態に戻します。通常、キャンバスの元の状態 (描画または変更
なし) は、新しい描画
または変更操作の前に保存され、新しい描画または変更操作が終了するたびに元の状態に復元される必要があります。この
は、今後の描画操作に役立ちます。
実際、キャンバスの 2D 描画環境コンテキストの多くのプロパティと一部のメソッドは、各プロパティの値が変更されると (または描画状態を変更するためにいくつかのメソッドが使用されると)、
状態に関連します。 >描画状態は「変更」です。変更のたびに保存すると、属性の複数の状態がスタックの形式で保存され、スタックの順序で複数回呼び出して、対応する保存された状態に戻すことができます。


☆ context.translate(x, y)

このメソッドは、現在の座標原点を (x, y) に移動します。

☆ context.restore()

キャンバスの状態を最後に保存した状態に復元します。

☆ context.closePath()

このコマンドは動作において lineTo 関数と非常に似ていますが、宛先がパスの

起点であると自動的に想定される点が異なります。ただし、closePath は 現在のシェイプが閉じられているか、

完全に含まれた領域を形成しているキャンバス。これは、将来の
塗りつぶしやストロークに役立ちます。
この時点で、さらに
セグメントを自由に続行できます。または、
いつでも beginPath を開始してパス
リストを完全にクリアできます。


☆ context.fill();

塗りつぶしスタイルを設定した後、閉じたパスを塗りつぶします。このメソッドを呼び出した後に

context.ストローク() メソッドを呼び出す必要はありません。

☆ context.fillRect(x, y, width, height)

(x, y) に幅と長さ (幅、高さ) の長方形の領域を描画して塗りつぶします。

このメソッドを呼び出した後に context.ストローク() メソッドを呼び出す必要はありません。

☆ context.ストロークRect(x, y, width, height)

(x, y) に幅と長さ (幅、高さ) の長方形の輪郭を描きます。

☆ context.clearRect(x, y, width, height)

位置 (長方形の左上隅) が (x, y,) で、サイズが (幅, 高さ) である長方形領域をクリーンアップします

。 長方形領域からコンテンツを削除し、元の透明な色にリセットします。

キャンバス内の長方形を消去する機能は、

HTML5 Canvas API を使用してアニメーションやゲームを作成するための核心です。
キャンバスのセクションを繰り返し描画したり消去したりすることで、
アニメーションのような錯覚を表現することができます。
この例はすでに Web 上に多数存在します。
実行するアニメーションを作成することもできます。
頻繁にキャンバスをクリアすることによって引き起こされるちらつきを最小限に抑えるために、
クリッピング機能を利用し、場合によっては二次的な
バッファリングされたキャンバスも利用する必要があります。


☆ context.drawImage( )

このメソッドには 3 つのオーバーロードがあり、キャンバス上に画像を描画できます。画像ソースには、
ページの img タグ、JS の画像オブジェクト、およびビデオのフレームを使用できます。
•context.drawImage(img, x, y)
(x, y) に image img を使用して画像を描画します。キャンバスのサイズが画像
より大きい場合は画像全体が描画され、画像がキャンバスより大きい場合は余分な部分がトリミングされます。
•context.drawImage(img, x, y, w, h)
(x, y)の画像imgを用いて縦横(w, h)の長方形領域を描画します。画像
のサイズが(w,h)に変更されます。
•context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy,
cw, ch)
描画オブジェクトとしてimg画像を使用し、imgの上の位置を( imgx, imgy
) キャンバス内の位置 (cx, cy)
にサイズ (imgw, imgh) の領域が描画され、サイズ (cw, ch) の領域が描画されます。
画像上のトリミングされた領域が画像範囲を超える場合、例外がスローされます。
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)
描画オブジェクトとしてビデオオブジェクトを使用し、ビデオ(vx, vy)の上部の位置を取得します
) サイズ(vw, vh)のフレーム、キャンバス上の位置(cx, cy)にサイズ(cw, ch)の領域を描画します。
さらに、drawImage() の最初のパラメータを別のキャンバスにすることもできます。

☆ context.getImageData(x, y, width, height)

このメソッドはキャンバス内の位置(x, y)からサイズ(幅、高さ)を取得します。

ピクセル領域であり、戻り値はImageDataオブジェクトです。 ImageData には、幅、
高さ、データの 3 つの属性があります。
data 属性はピクセル配列です。配列内の連続する 4 つの要素はそれぞれ RGBA の色と透明度の情報を含みます。 4 つの連続する要素
は 1 つのピクセルに属している必要があり、最初の要素の位置は任意に選択されません。
キャンバス内の指定領域
を上から下、左から右の順にスキャンすることでピクセル配列が取得されます。ピクセル配列の要素数は幅 * 高さ * 4 です。特定の
位置のピクセル情報を取得します。
この方法を使用する Web ページをブラウザでローカル ファイルとして開くと、正しく動作せず
、通常はセキュリティ エラーが発生します。この問題は、ファイルを
Web サーバーにアップロードしてアクセスをリクエストすることで解決できます。さらに、関連する画像、JS、および
HTML は同じドメイン名に由来する必要があります。ただし、IE9 にはローカル ファイル経由でアクセスできます。
例は次のとおりです。

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

// ピクセル領域を取得します

var imageData = context.getImageData(0, 0, 3, 3); // 3x3
grid

;

var width = imageData.width;
//ピクセル領域内の特定のピクセルの位置
var y = 2;対応する要素のピクセル配列のインデックスです
varPixelRedindex = ((y-1)*(width*4)) ((x-1)*4); >var ピクセルブルーインデックス = ピクセルレッドインデックス 2 ;
バー ピクセルアルファインデックス = ピクセルレッドインデックス 3;

var ピクセル = imageData.data; // CanvasPixelArray

var red = ピクセル[pixelRedindex];
var green = ピクセル[pixelBlueindex];
var alpha = ピクセル[pixelAlphaindex]; >


☆ context.createImageData(w, h)


サイズ (w, h) の ImageData オブジェクトを生成します。ImageData オブジェクト
の意味は、getImageData() で取得される ImageData オブジェクトと同じです。

☆ context.putImageData(ImageData, x, y, x1, y1, w, h)

ImageData オブジェクトをキャンバスの (x, y) に描画します。最後の 4 つのパラメータはオプションのパラメータで、トリミング四角形の位置とサイズを設定するために使用されます。

☆ context.createLinearGradient(x1, y1, x2, y2)

(x1, y1) と (x2, y2) の間に線形グラデーションを生成します。例:

コードをコピー

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

var gradientName = context.createLinearGradient( -5, -50,

5, -50);

☆ Gradient.addColorStop(オフセット, カラー)

さまざまな場所にグラデーション カラーを設定するためにグラデーションで使用されます。 color 引数
は、
オフセット位置のストロークまたは塗りつぶしに適用する色です。オフセット位置は、
0.0 ～ 1.0 の値で、グラデーション ライン 次のような色に達する必要があります:

gradientName.addColorStop(1, '#552200');

Color では、CSS の rgba(r,g,b,a) 関数を使用して、次のような透明なグラデーションを生成できます。

コードをコピー

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

//50% 色の透明グラデーションを生成します
gradientName.addColorStop(0.2, 'rgba(0, 0, 0, 0.5)');

☆ context.createRadialGradient(x0, y0, r0, x1, y1, r1)

2 つの円の間に放射状のグラデーション領域を作成します。最初の 3 つの引数は、(x0, y0) を中心とする半径 r0 の円を表します。
最後の 3 つの引数は、(x1, y1) を中心とする半径 r1 の 2 番目の円を表します。勾配は次のとおりです。
2 つの円の間の領域
全体に描画されます。

☆ context.createPattern(img, 'repeatPattern')

イメージ img を使用して、

ストロークスタイル スタイル、またはrepeatPattern の繰り返しタイプを持つ特定のパスの塗りつぶされた fillStyle スタイルを生成します。 repeatPattern の値は

、repeat、repeat-x、repeat-y、no-repeat のいずれかになります。例:

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

context.ストロークスタイル= context.createPattern (砂利,

'repeat');

パラメータ img は別のキャンバスまたはビデオにすることもできます

☆ context.scale(xMultiple, yMultiple)

2 つのパラメータはそれぞれ、x 方向と y 方向のオブジェクトの後続の描画倍率を指定します。値が 1 より大きい場合、

はズームインを意味し、0 から 1 の間はズームアウトを意味します。負の値にすると、反射や反転などの効果が得られます

。

☆ context.rotate(angle)

は、現在の座標原点を回転中心として、ラジアン

を単位として描画環境コンテキストを回転するために使用され、Math.PI と組み合わせられます。パラメータ角度が正の値の場合は時計回りに回転し、負の値の場合は反時計回りに回転します。

☆ context.transform(ScaleX, skewY, skewX, ScaleY, transX,

transY)

この関数は描画オブジェクトのサイズ、シアー、位置を制御するために使用されます。これは変換行列 です。 ScaleX と ScaleY は、それぞれ x 座標と y 座標のスケーリングです。 skewY は、

コンテキストの垂直シアーを制御します。その値は、任意のサイズの正または負の浮動小数点または整数にすることができます。これは、縦軸で y'= y skewY * x を実行する

と同等です。串最後の 2 つのパラメーターは、translate(x, y) の 2 つのパラメーター
と同等です。


☆ context.setTransform(ScaleX, skewY, skewX, ScaleY,
transX, transY)

このメソッドはtransformに似ていますが、transformメソッドは、以前に適用されたtransform、scale、rotateメソッドのエフェクトと組み合わされます。その結果、複雑な複合変換
エフェクトが生成されます。 setTransform メソッドは、コンテキストの元の状態から変換を適用し、前の変換と 複合しません。したがって、context.setTransform(1, 0, 0, 1,

0, 0) は、コンテキストの変換状態を元の値に復元するためによく使用されます。

☆ fillText (テキスト、x、y、最大幅)

(x, y) 座標にテキストを塗りつぶしてテキストを描画します。 maxwidth はオプションのパラメータ
で、すべてのテキストの幅とテキスト間隔の合計

がこの値を超える場合、単一のテキスト文字の幅と文字間隔は次のようになります。

個々の文字が長くなり、間隔が狭くなります。塗りつぶしテキストは、context.font、

context.fillStyle、context.textAlign などの属性を組み合わせて描画できます。

☆ ストロークテキスト (テキスト、x、y、最大幅)

(x, y) 座標にパス コンテンツ テキストを使用してテキストを描画します。 maxwidt はオプションのパラメータ

で、すべてのテキストの幅とテキスト間隔の合計 がこの値を超える場合、単一のテキスト文字の幅と文字間隔は次のようになります。 個々の文字が長くなり、間隔が狭くなります。パス テキストは、context.font、

context.textAlign、context.lineWidth、context.bloodStyle およびその他の

プロパティを組み合わせて描画できます。
例:





コードをコピー

コードは次のとおりです: var fontSize = 100 ;context.font = fontSize "px Arial";

while(context.measureText("Hello world!").width > 140)

{

fontSize--;
context .font = fontSize "px Arial";
}
context.fillText("Hello world!", 10, 10);
context.fillText("フォント サイズは " fontSize "px "、10、50);

☆ context.measureText("テキスト")

このメソッドは、font、textAlign、および textBaseline の現在の値に基づいて、テキストが占める領域のサイズを
計算します。 text パラメータは、描画に使用されるテキスト コンテンツです。このメソッド
は TextMetrics オブジェクトを返します。現在、TextMetrics オブジェクトには
width プロパティが 1 つだけありますが、将来的にはさらに多くのプロパティが提供される可能性があります。

☆ context.rect(x, y, w, h)

点(x,y)に幅w、高さhの長方形を描きます。現在のポイントは無視されます。ただし、長方形
が描画された後は、(x, y) が新しい現在点になります。

☆ context.arc(x, y, radius, startAngle, endAngle,
反時計回り)

円弧を描きます。 x、y は円弧の中心の座標です。radius は円弧の半径です。
startAngle、endAngle はそれぞれ開始ラジアンと終了ラジアンです。
Pi は Math.PI で表されます。値は 0 です。円弧は右方向に水平です。反時計回りの
は円弧を描く方向を示します。これはオプションのパラメーターです。ブール値、true は反時計回り、false
は時計回り、デフォルトは false です。 。このメソッドを使用すると、lineTo メソッドを省略できます。
メソッドを使用して円弧を描画した後、その後のパスの描画は円弧
の終点から開始されます。

☆ context.arcTo(x1, y1, x2, y2, radius)

現在の点と (x1, y1) はライン L1 を形成し、(x1, y1) と (x2, y2) は別の
ライン L2 を形成し、現在の点と (x2, y2) は 3 番目のラインを形成しますL3. (x1, y1) を原点とすると、
L1 と L2 が座標軸、半径は L1 と L2 に接する半径で、「線分」と同じ象限の円 O1 上にあります。 " L3, let L1との接点をp1、L2との接点をp2とします。円 O1 上の p1
と p2 の間に 2 つの円弧があります。原点 (x1, y1) に近い方の円弧 (円上の短い方の
円弧) が描かれます。

さらに、現在点と(x1, y1)の間の円弧を結ぶ線分が描画されます

パス描画は連続なので、現在点と(x1, y1)の間の線分は最初に描画し、次に
を描いてから円弧を描きます。接点ｐ２が次の現在点となる。
このメソッドは、角丸長方形を描画するためによく使用されます。

☆ context.quadraticCurveTo(x1, y1, x2, y2)

現在の座標と (x2, y2) の間に二次ベジェ曲線セグメントを描画します。曲率は

(x1, y1) によって制御されます。 (x1, y1) は曲線セグメント上にありません。

HTML5 Canvas API の曲線のその他のオプションには、

bezierCurveTo、arcTo、および arc 関数が含まれます。
これらの曲線は、
曲線の特性を決定するために追加の制御点、半径、または角度を取得します。 .

☆ context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

現在の点と (x, y) の間に制御点 (cp1x, cp1y) と (cp2x, cp2y)

を使用して 3 次ベジェ曲線を描画し、曲率を制御します。

☆ context.clip()

このメソッドは、最後に描画された閉じたパスに基づいてクリッピング領域

(クリップ領域) を作成します。クリッピングエリアはマスクに相当し、今後描画されるコンテンツ
のうち、クリッピングエリア内に収まる部分のみが表示されます。

☆ context.isPointInPath(x, y)

座標(x,y)が描画されたパス内にあるかどうかを確認します。戻り値は true または

false です。

☆ Canvas.toDataURL(type, args)

このメソッドはキャンバスを画像に変換でき、画像は Base64 エンコーディングに基づいています。

で 2 つのパラメーターが指定されていない場合、このメソッドはパラメーターなしで呼び出され、変換された画像形式は png 形式
になります。
•type: image/png、image/jpeg など、変換する画像形式を指定します。
•args: オプションのパラメータ。たとえば、type が image/jpeg の場合、args には
0.0 ～ 0.1 の値を指定して画像の品質を指定できます。
たとえば、次のコードは、キャンバスに描画されたコンテンツを新しいブラウザ ウィンドウ
またはタブで開きます:

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

var Canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png "));