Context2D QML Type

Canvas アイテム上の図形に対して 2D のコンテキストを提供します。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• canvas : QtQuick::Canvas
• fillRule : enumeration
• fillStyle : variant
• font : string
• globalAlpha : real
• globalCompositeOperation : string
• lineCap : string
• lineDashOffset : real (since QtQuick 2.11)
• lineJoin : string
• lineWidth : real
• miterLimit : real
• shadowBlur : real
• shadowColor : string
• shadowOffsetX : real
• shadowOffsetY : real
• strokeStyle : variant
• textAlign : string
• textBaseline : string

方法

• Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• Context2D arcTo(real x1, real y1, real x2, real y2, real radius)
• Context2D beginPath()
• Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• Context2D clearRect(real x, real y, real w, real h)
• Context2D clip()
• Context2D closePath()
• CanvasGradient createConicalGradient(real x, real y, real angle)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(real sw, real sh)
• CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)
• variant createPattern(Image image, string repetition)
• variant createPattern(color color, enumeration patternMode)
• CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• void drawImage(variant image, real dx, real dy)
• void drawImage(variant image, real dx, real dy, real dw, real dh)
• void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)
• Context2D ellipse(real x, real y, real w, real h)
• Context2D fill()
• Context2D fillRect(real x, real y, real w, real h)
• Context2D fillText(text, x, y)
• CanvasImageData getImageData(real x, real y, real w, real h)
• array getLineDash() (since QtQuick 2.11)
• bool isPointInPath(real x, real y)
• Context2D lineTo(real x, real y)
• var measureText(text)
• Context2D moveTo(real x, real y)
• void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)
• Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)
• Context2D rect(real x, real y, real w, real h)
• Context2D reset()
• Context2D resetTransform()
• Context2D restore()
• Context2D rotate(real angle)
• Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)
• Context2D save()
• Context2D scale(real x, real y)
• void setLineDash(array pattern) (since QtQuick 2.11)
• Context2D setTransform(real a, real b, real c, real d, real e, real f)
• Context2D shear(real sh, real sv)
• Context2D stroke()
• Context2D strokeRect(real x, real y, real w, real h)
• Context2D strokeText(text, x, y)
• Context2D text(string text, real x, real y)
• Context2D transform(real a, real b, real c, real d, real e, real f)
• Context2D translate(real x, real y)

詳細な説明

Context2D オブジェクトは、Canvas アイテムのgetContext() メソッドによって作成できます。

Canvas {
  id:canvas
  onPaint:{
     var ctx = canvas.getContext('2d');
     //...
  }
}

Context2D API は、W3C Canvas 2D Context API 標準を、いくつかの拡張機能を加えて実装しています。

Context2D API は、Canvas アイテム上に描画するために必要なメソッドや属性を定義するレンダリングコンテキストを提供します。以下のコードは、canvas レンダリングコンテキストを `context ` 変数に割り当てています：

var context = mycanvas.getContext("2d")

Context2D API は、下図に示すように、原点 (0,0) が左上隅にある座標系としてキャンバスを描画します。座標は、x 軸に沿って左から右へ、y 軸に沿ってキャンバスの上から下へと増加します。

プロパティのドキュメント

canvas : QtQuick::Canvas

コンテキストが描画を行うキャンバス・アイテムを保持します。

このプロパティは読み取り専用です。

fillRule : enumeration

図形の塗りつぶしに現在使用されている塗りつぶしルールを保持します。以下の塗りつぶしルールがサポートされています：

「fillStyle」も参照してください 。

fillStyle : variant

図形の塗りつぶしに現在使用されているスタイルを保持します。スタイルは、CSSの色を含む文字列、CanvasGradient 、またはCanvasPatternオブジェクトのいずれかです。無効な値は無視されます。このプロパティでは、以下のいくつかの色表記形式が使用できます。

• 'rgb(red, green, blue)' - 例: 'rgb(255, 100, 55)' または 'rgb(100%, 70%, 30%)'
• 'rgba(red, green, blue, alpha)' - 例: 'rgb(255, 100, 55, 1.0)' または 'rgb(100%, 70%, 30%, 0.5)'
• 'hsl(hue, saturation, lightness)'
• 'hsla(hue, saturation, lightness, alpha)'
• '#RRGGBB' - 例: '#00FFCC'
• Qt.rgba(赤、緑、青、アルファ) - 例：Qt.rgba(0.3, 0.7, 1, 1.0)

ループ内でfillStyle やstrokeStyle を何度も割り当てる場合は、最後のQt.rgba()構文を選択してください。これは、すでに有効なQColor 値であるため、毎回解析する必要がなく、パフォーマンスが最も優れているからです。

デフォルト値は「#000000」です。

createLinearGradient()、createRadialGradient()、createPattern()、およびstrokeStyleも参照してください 。

font : string

現在のフォント設定を保持します。

W3Cの2Dコンテキスト規格におけるフォントに関するサブセットがサポートされています：

• font-style（オプション）：normal | italic | oblique
• font-variant（オプション）：normal | small-caps
• font-weight（オプション）：normal | bold | 1 ... 1000
• font-size: Npx | Npt（ここで N は正の数）
• font-family:http://www.w3.org/TR/CSS2/fonts.html#propdef-font-familyを参照

フォントのデフォルト値は「10px sans-serif」です。

globalAlpha : real

レンダリング操作に適用される現在のアルファ値を保持します。この値は、0.0 （完全に透明）から1.0 （完全に不透明）までの範囲でなければなりません。デフォルト値は1.0 です。

globalCompositeOperation : string

現在の構成操作を保持します。許可されている操作は次のとおりです。

W3C 標準に準拠し、必須モード以外の拡張合成モードは「ベンダー名-演算名」という構文で提供されます。例えば、QPainter::CompositionMode_Exclusion は「qt-exclusion」として提供されます。

lineCap : string

現在のラインキャップのスタイルを保持します。利用可能なラインキャップのスタイルは以下の通りです：

その他の値は無視されます。

lineDashOffset : real [since QtQuick 2.11]

現在の線ダッシュのオフセットを保持します。デフォルトの線ダッシュのオフセット値は `0` です。

このプロパティはQtQuick 2.11で導入されました。

getLineDash() およびsetLineDash()も参照してください 。

lineJoin : string

現在の線結合スタイルを保持します。結合は、2つの連続する線が共有するサブパスの任意の点に存在します。サブパスが閉じた場合、その最初の点（最後の点と同等）にも結合が存在し、サブパス内の最初の線と最後の線を結びつけます。

使用可能な線の結合スタイルは次のとおりです：

それ以外の値は無視されます。

lineWidth : real

現在の線幅を保持します。ゼロより大きい有限値以外の値は無視されます。

miterLimit : real

現在のマイター制限比率を保持します。マイター制限のデフォルト値は 10.0 です。

shadowBlur : real

影に適用されている現在のぼかしレベルを保持します

shadowColor : string

現在の影の色を保持します。

shadowOffsetX : real

現在のシャドウオフセットを、水平方向の正の距離として保持します。

shadowOffsetYも参照してください 。

shadowOffsetY : real

現在のシャドウオフセットを、垂直方向の正の座標として保持します。

shadowOffsetXも参照してください 。

strokeStyle : variant

図形の周囲の線に使用する現在の色またはスタイルを保持します。スタイルは、CSSの色を含む文字列、CanvasGradient 、またはCanvasPatternオブジェクトのいずれかです。無効な値は無視されます。

デフォルト値は '#000000' です。

関連項目： createLinearGradient()、createRadialGradient()、createPattern()、およびfillStyle 。

textAlign : string

現在のテキストの配置設定を保持します。指定可能な値は次のとおりです。

その他の値は無視されます。

textBaseline : string

現在のベースライン位置合わせ設定を保持します。取り得る値は次のとおりです。

その他の値は無視されます。デフォルト値は「alphabetic」です。

メソッドのドキュメント

Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

現在のサブパスに、点 (x,y) を中心とし、半径radius の円の周上に位置する円弧を追加します。

startAngle およびendAngle は、いずれも x 軸からの距離をラジアン単位で表します。

上の図の各弧はすべて時計回りに描かれているため、anticlockwise パラメータはfalse となります。

arcTo およびW3C の 2D コンテキスト標準（arc() に関する記述）も参照してください 。

Context2D arcTo(real x1, real y1, real x2, real y2, real radius)

指定された制御点と半径を持つ円弧を、直線によって前の点と接続された状態で、現在のサブパスに追加します。円弧を描画するには、線を作成したときと同じ手順から始めます：

• beginPath() メソッドを呼び出して、新しいパスを設定します。
• moveTo(x,y) メソッドを呼び出し、キャンバス上の (x,y) 点を開始位置として設定します。
• 円弧または円を描画するには、arcTo(x1,y1,x2,y2,radius) メソッドを呼び出します。これにより、始点 (x1,y1)、終点 (x2,y2)、半径 (radius ) を持つ円弧が現在のサブパスに追加され、直線によって前のサブパスと接続されます。

arc およびW3Cの2Dコンテキスト標準におけるarcTo()についても参照してください 。

Context2D beginPath()

現在のパスを新しいパスにリセットします。

Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

現在の位置と指定された終点との間に、(cp1x,cp1y) および (cp2x,cp2y) で指定された制御点を使用して、3次ベジエ曲線を追加します。曲線が追加されると、現在の位置は曲線の終点 (x,y) に更新されます。以下のコードを実行すると、下図のようなパスが生成されます。

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 0);//start point
ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
ctx.stroke();

bezierCurveTo に関する W3C 2D コンテキスト標準およびbezierCurveTo を使用した「美しい花」デモも参照してください 。

Context2D clearRect(real x, real y, real w, real h)

(x 、y 、w 、h) で指定された矩形内のキャンバスのすべてのピクセルを、透明な黒に設定します。

Context2D clip()

現在のパスからクリッピング領域を作成します。クリッピングパスの外側にある図形の部分は表示されません。clip() メソッドを使用して複雑な図形を作成するには：

1. context.beginPath() メソッドを呼び出して、クリッピングパスを設定します。
2. lineTo 、arcTo 、arc 、moveTo などのメソッドと、closePath メソッドを任意の組み合わせで呼び出して、クリッピングパスを定義します。
3. context.clip() メソッドを呼び出します。

新しい図形が表示されます。以下に、クリッピングパスによって画像の表示がどのように変更されるかを示します。

beginPath()、closePath()、stroke()、fill()、およびクリップに関する W3C 2D コンテキスト標準も参照してください 。

Context2D closePath()

現在のサブパスを、その始点まで線を引いて閉じ、自動的に新しいパスを開始します。新しいパスの現在の点は、前のサブパスの最初の点となります。

closePath については、W3C 2D コンテキスト標準も参照してください 。

CanvasGradient createConicalGradient(real x, real y, real angle)

中心点（x 、y ）を軸として、反時計回りに色を補間する円錐グラデーションを表すCanvasGradient オブジェクトを返します。開始角度はangle （単位：ラジアン）です。

CanvasGradient::addColorStop()、createLinearGradient()、createRadialGradient()、createPattern()、fillStyle 、およびstrokeStyleも参照してください 。

CanvasImageData createImageData(CanvasImageData imageData)

imageData 引数と同じ次元を持つCanvasImageData オブジェクトを作成します。

CanvasImageData createImageData(Url imageUrl)

imageUrl から指定された画像を読み込んで、CanvasImageData オブジェクトを作成します。

関連項目: Canvas::loadImage()、QtQuick::Canvas::unloadImage()、およびQtQuick::Canvas::isImageLoaded 。

CanvasImageData createImageData(real sw, real sh)

指定された寸法（sw 、sh ）を持つCanvasImageData オブジェクトを作成します。

CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)

開始点（x0 、y0 ）と終了点（x1 、y1 ）を結ぶ線に沿って色が変化する線形グラデーションを表すCanvasGradient オブジェクトを返します。

グラデーションとは、色間の滑らかな変化のことです。グラデーションには、線形グラデーションと放射状グラデーションの2種類があります。グラデーションには2つ以上のカラーストップが必要であり、これらはグラデーションの始点と終点、または始点と終点の円の間で、0から1の位置に配置された色の変化を表します。

関連項目： CanvasGradient::addColorStop()、createRadialGradient()、createConicalGradient()、createPattern()、fillStyle 、およびstrokeStyle 。

variant createPattern(Image image, string repetition)

指定された画像を使用し、repetition 引数で指定された方向に沿って繰り返し表示される CanvasPattern オブジェクトを返します。

image パラメータは、有効なImageアイテム、有効なCanvasImageData オブジェクト、または読み込まれた画像のURLでなければなりません。画像データが存在しない場合、この関数はINVALID_STATE_ERR例外をスローします。

repetition に指定可能な値は次のとおりです。

repeat 引数が空または null の場合、値「repeat」が使用されます。

strokeStyle およびfillStyleも参照してください 。

variant createPattern(color color, enumeration patternMode)

これはオーバーロードされた関数です。指定されたcolor およびpatternMode を使用するCanvasPatternオブジェクトを返します。有効なパターンモードは以下の通りです：

Qt::BrushStyleも参照してください 。

CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)

原点 (x0,y0) と半径r0 を持つ開始円、および原点 (x1,y1) と半径r1 を持つ終了円によって定義される円錐に沿って描画される放射状グラデーションを表す `CanvasGradient ` オブジェクトを返します。

CanvasGradient::addColorStop()、createLinearGradient()、createConicalGradient()、createPattern()、fillStyle 、およびstrokeStyleも参照してください 。

void drawImage(variant image, real dx, real dy)

指定されたimage を、位置(dx,dy)のキャンバス上に描画します。注：image の型は、Imageアイテム、画像のURL、またはCanvasImageData オブジェクトのいずれかです。Imageアイテムとして指定された場合、画像が完全に読み込まれていないと、このメソッドは何も描画しません。 URL文字列として指定された場合、まずCanvasアイテムのCanvas::loadImage()メソッドを呼び出して画像を読み込む必要があります。描画されるこの画像は、指定されたimage がCanvasImageData オブジェクトである場合でも、現在のコンテキストのクリップパスの影響を受けます。

CanvasImageData 、Image 、Canvas::loadImage 、Canvas::isImageLoaded 、Canvas::imageLoaded 、およびdrawImage に関する W3C 2D コンテキスト標準も参照してください 。

void drawImage(variant image, real dx, real dy, real dw, real dh)

これはオーバーロードされた関数です。指定されたアイテムを、image として、座標 (dx,dy) の位置に、幅dw 、高さdh でキャンバス上に描画します。

注：image 型は、Image アイテム、画像の URL、またはCanvasImageData オブジェクトのいずれかです。Image アイテムとして指定された場合、画像が完全に読み込まれていないと、このメソッドは何も描画しません。 URL文字列として指定された場合、まずCanvasアイテムのCanvas::loadImage()メソッドを呼び出して画像を読み込む必要があります。描画されるこの画像は、指定されたimage がCanvasImageData オブジェクトである場合でも、現在のコンテキストのクリップパスの影響を受けます。

関連項目： CanvasImageData 、Image 、Canvas::loadImage()、Canvas::isImageLoaded 、Canvas::imageLoaded 、およびdrawImage に関する W3C 2D コンテキスト標準。

void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)

これはオーバーロードされた関数です。指定されたアイテムを、ソースポイント (sx,sy)、ソース幅sw 、ソース高さsh から、image として、キャンバスの点 (dx,dy) に、幅dw 、高さdh で描画します。

注：image の型は、ImageまたはCanvasアイテム、画像のURL、あるいはCanvasImageData オブジェクトのいずれかです。Imageアイテムとして指定された場合、画像が完全に読み込まれていないと、このメソッドは何も描画しません。 URL文字列として指定された場合、まずCanvasアイテムのCanvas::loadImage()メソッドを呼び出して画像を読み込む必要があります。描画されるこの画像は、指定されたimage がCanvasImageData オブジェクトである場合でも、現在のコンテキストのクリップパスに従います。

関連項目： CanvasImageData 、Image 、Canvas::loadImage()、Canvas::isImageLoaded 、Canvas::imageLoaded 、およびdrawImage に関する W3C 2D コンテキスト標準。

Context2D ellipse(real x, real y, real w, real h)

左上隅が (x,y)、幅がw 、高さがh で定義される境界矩形内に楕円を作成し、それを閉じたサブパスとしてパスに追加します。

この楕円は、0度（3時の位置）を始点および終点とする、時計回りの曲線で構成されています。

Context2D fill()

サブパスを現在の塗りつぶしスタイルで塗りつぶします。

「W3C 2D コンテキスト標準（fillおよびfillStyle）」も参照してください 。

Context2D fillRect(real x, real y, real w, real h)

(x 、y 、w 、h) で指定された矩形領域を、fillStyle を使用して塗りつぶします。

fillStyleも参照してください 。

Context2D fillText(text, x, y)

指定されたtext を、指定された位置（x 、y ）に挿入します。

font 、textAlign 、textBaseline 、およびstrokeTextも参照してください 。

CanvasImageData getImageData(real x, real y, real w, real h)

(x 、y 、w 、h) で指定されたキャンバスの矩形領域の画像データを含む `CanvasImageData ` オブジェクトを返します。

[since QtQuick 2.11] array getLineDash()

その線のダッシュパターンを表す qreals の配列を返します。

このメソッドは QtQuick 2.11 で導入されました。

setLineDash() およびlineDashOffsetも参照してください 。

bool isPointInPath(real x, real y)

点 (x,y) が現在のパス上にある場合、true を返します。

isPointInPath については、W3C 2D コンテキスト標準も参照してください 。

Context2D lineTo(real x, real y)

現在の位置から、座標 (x,y) にある点まで線分を描画します。

var measureText(text)

width プロパティを持つオブジェクトを返します。このプロパティの値は、現在のフォントで指定されたtext を使用してQFontMetrics::horizontalAdvance()を呼び出した場合の結果と同等です。

Context2D moveTo(real x, real y)

(x,y) にある点を座標とする新しいサブパスを作成します。

void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)

指定されたimageData オブジェクトのデータを、座標 (dx,dy) の位置にキャンバス上に描画します。

「ダーティ・レクタングル」(dirtyX,dirtyY,dirtyWidth,dirtyHeight)が指定された場合、そのレクタングル内のピクセルのみが描画されます。

Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)

現在の点と終点（x 、y ）の間に、制御点（cpx 、cpy ）で指定された2次ベジェ曲線を追加します。

quadraticCurveTo については、W3C 2D コンテキスト標準も参照してください 。

Context2D rect(real x, real y, real w, real h)

位置 (x,y) に、指定された幅w および高さh を持つ長方形を、閉じたサブパスとして追加します。

Context2D reset()

コンテキストの状態とプロパティをデフォルト値にリセットします。

Context2D resetTransform()

変換行列をデフォルト値にリセットします（setTransform の呼び出しと同等です（1 、0 、0 、1 、0 、0 ））。

transform()、setTransform()、およびreset()も参照してください 。

Context2D restore()

スタックの最上部の状態を取り出し、その状態のコンテキストを復元します。

save()も参照してください 。

Context2D rotate(real angle)

キャンバスを、現在の原点を中心に、angle （ラジアン単位）だけ時計回りに回転させます。

ctx.rotate(Math.PI/2);

回転変換行列は次の通りです:

ここで、angle は回転角度（ラジアン単位）を表します。

Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

(x 、y 、w 、h) で指定された角が丸い長方形をパスに追加します。xRadius およびyRadius 引数は、角が丸い長方形の角を定義する楕円の半径を指定します。

Context2D save()

現在の状態をステートスタックにプッシュします。

状態属性を変更する前に、後で参照できるように現在の状態を保存しておく必要があります。コンテキストは、描画状態のスタックを管理しています。各状態は、現在の変換行列、クリッピング領域、および以下の属性の値で構成されます：

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• font
• textAlign
• textBaseline

現在のパスは描画状態の一部ではありません。パスは、beginPath() メソッドを呼び出すことでリセットできます。

Context2D scale(real x, real y)

現在の変形行列にスケーリング係数を乗算することで、キャンバスグリッド内の各ユニットのサイズを拡大または縮小します。x は水平方向のスケーリング係数、y は垂直方向のスケーリング係数です。

次のコードは、キャンバス上に描画されたオブジェクトの水平方向のサイズを2倍にし、垂直方向のサイズを半分にします。

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] void setLineDash(array pattern)

ダッシュのパターンを指定されたパターンに設定します。

pattern 線と空白を交互に描画するための間隔を指定する数値のリスト。

配列の要素数が奇数の場合、配列の要素がコピーされ、連結されます。たとえば、[5, 15, 25] は [5, 15, 25, 5, 15, 25] になります。

var space = 4 ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space]) ... ctx.stroke();

このメソッドは QtQuick 2.11 で導入されました。

getLineDash() およびlineDashOffsetも参照してください 。

Context2D setTransform(real a, real b, real c, real d, real e, real f)

変換行列を、以下で説明するように引数で指定された行列に変更します。

変換行列を直接変更することで、拡大・縮小、回転、平行移動の変換を1つの手順で実行できます。

キャンバス上の各点は、描画が行われる前にこの行列で乗算されます。HTML Canvas 2D Context仕様では、変換行列を次のように定義しています：

ここで、

• a は水平（x）方向の拡大率

  

• c は、x方向のスキュー係数です

  

• e は x 方向の平行移動量

  

• b は y（垂直）方向のスキュー係数

  

• d は y 方向の拡大率

  

• f は y 方向の平行移動量

  

• 最後の行は一定である

スケール係数とスキュー係数は倍数です。e およびf は、translate(x,y) メソッドの単位と同様に、座標空間の単位です。

transform()も参照してください 。

Context2D shear(real sh, real sv)

変換行列を、水平方向にsh 、垂直方向にsv だけ剪断します。

Context2D stroke()

現在のストロークスタイルでサブパスを描画します。

strokeStyle およびW3C 2Dコンテキスト規格のストロークに関する項目も参照してください 。

Context2D strokeRect(real x, real y, real w, real h)

(x 、y 、w 、h) で指定された矩形のパスを、strokeStyle 、lineWidth 、lineJoin 、および（必要に応じて）miterLimit 属性を使用して描画します。

strokeStyle 、lineWidth 、lineJoin 、およびmiterLimitも参照してください 。

Context2D strokeText(text, x, y)

指定されたtext を、(x,y)で指定された位置で描画します。

font 、textAlign 、textBaseline 、およびfillTextも参照してください 。

Context2D text(string text, real x, real y)

指定されたtext を、提供された現在のコンテキストフォントから作成された一連の閉じたサブパスとしてパスに追加します。

サブパスは、テキストのベースラインの左端が (x,y) で指定された点に位置するように配置されます。

Context2D transform(real a, real b, real c, real d, real e, real f)

このメソッドは `setTransform()` と非常によく似ていますが、古い変換行列を置き換えるのではなく、指定された変換行列を現在の行列に乗算することで適用します。

setTransform() メソッド（a 、b 、c 、d 、e 、f ）は、実際には現在の変換行列を単位行列にリセットし、その後、同じ引数で transform() メソッド（a 、b 、c 、d 、e 、f ）を呼び出します。

setTransform()も参照してください 。

Context2D translate(real x, real y)

キャンバスの原点を、座標空間の単位で、水平方向にx 、垂直方向にy だけ平行移動させます。

原点を移動させることで、各図形の座標を手動で測定することなく、キャンバス上にさまざまなオブジェクトのパターンを描画できるようになります。