Canvas2DContext QML Type

Canvas2D アイテム上に描画するための2Dコンテキストを提供します。詳細...

この型はテクノロジープレビュー段階にあり、変更される可能性があります。

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

プロパティ

• antialias : real
• canvas : Canvas2D
• direction : string
• fillRule : string
• fillStyle : variant
• font : string
• globalAlpha : real
• globalBrightness : real
• globalCompositeOperation : string
• globalContrast : real
• globalSaturation : real
• highQualityStroking : bool
• lineCap : string
• lineJoin : string
• lineWidth : real
• miterLimit : real
• strokeStyle : variant
• textAlign : string
• textAntialias : real
• textBaseline : string
• textLineHeight : real
• textWrapMode : string
• windingEnforce : bool

方法

• void addPath(path2d path, transform2d transform)
• void addPath(path2d path, int start, int count, transform2d transform)
• void arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• void arcTo(real x1, real y1, real x2, real y2, real radius)
• void beginHoleSubPath()
• void beginPath()
• void beginSolidSubPath()
• void bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• void circle(real centerX, real centerY, real radius)
• void cleanupResources()
• void clearRect(real x, real y, real width, real height)
• void closePath()
• boxgradient2d createBoxGradient(real x, real y, real width, real height, real feather, real radius)
• boxshadow2d createBoxShadow(real x, real y, real width, real height)
• boxshadow2d createBoxShadow(real x, real y, real width, real height, real blur, string color, real radius)
• boxshadow2d createBoxShadow(real x, real y, real width, real height, real blur, string color, real radiusTopLeft, real radiusTopRight, real radiusBottomRight, real radiusBottomLeft)
• conicalgradient2d createConicalGradient(real x, real y, real angle)
• gridpattern2d createGridPattern(real x, real y, real width, real height, string lineColor, string backgroundColor, real lineWidth, real feather, real angle)
• lineargradient2d createLinearGradient(real x0, real y0, real x1, real y1)
• path2d createPath2D()
• path2d createPath2D(path2d path)
• path2d createPath2D(string svgPath)
• imagepattern2d createPattern(Image image, string repetition)
• radialgradient2d createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• transform2d createTransform2D()
• void drawBoxShadow(boxshadow2d shadow)
• 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)
• void ellipse(real centerX, real centerY, real radiusX, real radiusY)
• void ellipseRect(real x, real y, real width, real height)
• void fill()
• void fill(string fillRule)
• void fill(path2d path, int pathGroup)
• void fill(path2d path, string fillRule, int pathGroup)
• void fillRect(real x, real y, real width, real height)
• void fillText(text, x, y, maxWidth)
• void fillText(text, x, y, width, height)
• transform2d getTransform()
• void lineTo(real x, real y)
• object measureText(text)
• void moveTo(real x, real y)
• void quadraticCurveTo(real cpx, real cpy, real x, real y)
• void rect(real x, real y, real width, real height)
• void removePathGroup(int pathGroup)
• void reset()
• void resetClipping()
• void resetTransform()
• void restore()
• void rotate(real angle)
• void roundRect(real x, real y, real width, real height, real radius)
• void roundRect(real x, real y, real width, real height, real radiusTopLeft, real radiusTopRight, real radiusBottomRight, real radiusBottomLeft)
• void save()
• void scale(real scale)
• void scale(real sx, real sy)
• void setClipRect(real x, real y, real width, real height)
• void setPathWinding(string winding)
• void setTransform(transform2d transform)
• void setTransform(real a, real b, real c, real d, real e, real f)
• void skew(real angleX, real angleY)
• void stroke()
• void stroke(path2d path, int pathGroup)
• void strokeRect(real x, real y, real width, real height)
• void transform(transform2d transform)
• void transform(real a, real b, real c, real d, real e, real f)
• void translate(real x, real y)

詳細な説明

Canvas2DContext オブジェクトは、Canvas 項目のgetContext() メソッドを使用して作成できます。

Canvas2D {
  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")

以下は、Canvas2D を使用して丸いボタンを作成する簡単な例です。

let offsetX = 2; let offsetY = 4; let shadow = ctx.createBoxShadow(40 + offsetX, 70 + offsetY, 120, 60); shadow.setRadius(30); shadow.setBlur(15); shadow.setColor("#60373F26"); ctx.drawBoxShadow(shadow); // Paint rounded rect ctx.beginPath(); ctx.roundRect(40, 70, 120, 60, 30); ctx.fillStyle = "#DBEB00"; ctx.fill(); // Paint text ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "24px 'Titillium Web'"; ctx.fillStyle = "#373F26"; ctx.fillText("CLICK!", 100, 100);

以下は、簡単なグラフを描画する別の例です。

// Paint grid const grid = ctx.createGridPattern(0, 0, 10, 10, "#404040", "#202020"); const w = 200; const h = 200; ctx.fillStyle = grid; ctx.fillRect(0, 0, w, h); // Paint axis ctx.fillStyle = "white"; ctx.fillRect(0, 0.5 * h - 1, w, 2); ctx.fillRect(0.5 * w - 1, 0, 2, h); // Paint shadowed graph ctx.beginPath(); ctx.moveTo(20, h * 0.8); ctx.bezierCurveTo(w * 0.2, h * 0.4, w * 0.5, h * 0.8, w - 20, h * 0.2); ctx.antialias = 10; ctx.lineWidth = 12; ctx.strokeStyle = "#D0000000"; ctx.stroke(); ctx.antialias = 1; ctx.lineWidth = 6; const lg = ctx.createLinearGradient(0, 0, 0, h); lg.addColorStop(0, "red"); lg.addColorStop(1, "green"); ctx.strokeStyle = lg; ctx.stroke();

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

antialias : real

現在のアンチエイリアスの量を保持します。アンチエイリアスの値が大きいほど、描画が滑らかになります。これは塗りつぶしやストロークの描画にのみ影響し、画像やテキストには影響しません。デフォルト値は1.0 で、最大値は10.0 です。

アンチエイリアシングはパスごとに変更できるため、各ストロークや塗りつぶしの前に設定することができます。

ctx.lineWidth = 6; for (let i = 1; i < 10 ; i++) { let y = i * 20; ctx.antialias = i; ctx.beginPath(); ctx.moveTo(20, y); ctx.bezierCurveTo(80, y + 20, 120, y - 20, 180, y); ctx.stroke(); }

textAntialiasも参照してください 。

canvas : Canvas2D

コンテキストが描画を行うキャンバス項目を保持します。

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

direction : string

テキストの描画に使用される現在の方向を保持します。取り得る値は次のとおりです。

デフォルトの方向は `"inherit"` です。

ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "42px 'Titillium Web'"; ctx.fillStyle = "black"; ctx.fillText("Hi!", 100, 50); ctx.direction = "rtl"; ctx.fillText("Hi!", 100, 150);

fillRule : string

図形の塗りつぶしに現在使用されている塗りつぶしルールを保持します。この値は、ルールが設定された後のすべての `fill()` 呼び出しに適用されます。デフォルトの塗りつぶしルールは"nonzero"

以下の塗りつぶしルールがサポートされています：

function paintStar() { ctx.beginPath(); ctx.moveTo(120, 60); for (let i = 1; i < 6; ++i) { ctx.lineTo(60 + 60 * Math.cos(0.8 * i * Math.PI), 60 + 60 * Math.sin(0.8 * i * Math.PI)); } ctx.fill(); ctx.stroke(); }; ctx.fillRule = "nonzero"; paintStar(); ctx.translate(75, 75); ctx.fillRule = "evenodd"; paintStar();

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

fillStyle : variant

図形の塗りつぶしに現在使用されているスタイルを保持します。デフォルトの塗りつぶしスタイルは、黒一色（'#000000'）です。スタイルは、CSS カラーを含む文字列（QML color ）、または Canvas ブラシオブジェクトのいずれかです。無効な値は無視されます。このプロパティでは、いくつかの色表記法が使用可能です：

• '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(色相, 彩度, 明度)'
• 'hsla(hue, saturation, lightness, alpha)'
• '#RRGGBB' - 例：'#00FFCC'
• '#AARRGGBB' - 例: '#8000FFCC'
• SVG カラー名 - 例: 'black'、'green'、'lightsteelblue'
• Qt.hsla(色相, 彩度, 明度, 透明度) - 例: Qt.hsla(0.3, 0.7, 1, 1.0)
• Qt.rgba(red, green, blue, alpha) - 例: Qt.rgba(0.3, 0.7, 1, 1.0)

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

ctx.fillStyle = "black"; ctx.fillRect(20, 20, 160, 160); ctx.fillStyle = Qt.rgba(0, 0.25, 0.3, 1); ctx.fillRect(40, 40, 120, 120); ctx.fillStyle = "#2CDE85"; ctx.fillRect(60, 60, 80, 80);

const g2 = ctx.createRadialGradient(140, 40, 0, 300); g2.addColorStop(0, Qt.rgba(0.2, 0.8, 0.6)); g2.addColorStop(1, Qt.rgba(0, 0.25, 0.3, 1)); ctx.fillStyle = g2; ctx.fillRect(20, 20, 160, 160); g2.setCenterPosition(100, 100); ctx.fillStyle = g2; ctx.fillRect(40, 40, 120, 120);

createLinearGradient()、createRadialGradient()、createConicalGradient()、createBoxGradient()、createBoxShadow()、createPattern()、createGridPattern()、および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 です。

ctx.fillStyle = "#d9f720"; for (let i = 0; i < 4; i++) { let x = 100 * (i % 2); let y = 100 * Math.floor(i / 2); ctx.globalAlpha = 1.0 - i * 0.3; ctx.fillRect(x, y, 100, 100); ctx.drawImage("qt_logo2.png", x, y, 100, 100); }

globalBrightness : real

レンダリング処理に適用される現在の輝度値を保持します。この輝度は、レンダリングされるすべての図形に適用されます。値が 0 の場合、描画結果は完全に黒になります。また、値を 1.0 より大きく設定することで、輝度を高めることもできます。デフォルトの輝度は1.0 です。

ctx.fillStyle = "#d9f720"; for (let i = 0; i < 4; i++) { let x = 100 * (i % 2); let y = 100 * Math.floor(i / 2); ctx.globalBrightness = 1.5 - i * 0.45; ctx.fillRect(x, y, 100, 100); ctx.drawImage("qt_logo2.png", x, y, 100, 100); }

globalCompositeOperation : string

現在の合成操作を保持します。このモードは、すべての描画操作に適用されます。許可される操作は以下の通りです：

const modes = ["source-over", "source-atop", "destination-out"]; for (let i = 0; i < modes.length; i++) { // First item - source-over mode ctx.globalCompositeOperation = "source-over"; let y = 5 + i * 65; ctx.fillStyle = "#D9F720"; ctx.fillRect(20, y, 140, 40); // Second item - Different modes ctx.globalCompositeOperation = modes[i]; ctx.beginPath(); ctx.ellipse(130, y + 30, 60, 25); ctx.strokeStyle = "#00414A"; ctx.fillStyle = "#2CDE85"; ctx.fill(); ctx.stroke(); }

globalContrast : real

レンダリング操作に適用される現在のコントラスト値を保持します。このコントラストは、レンダリングされるすべての図形に適用されます。値を 0 に設定すると、描画結果は完全に灰色（0.5, 0.5, 0.5）になります。コントラストを高めるために、値を 1.0 より大きく設定することも可能です。デフォルトのコントラストは1.0 です。

ctx.fillStyle = "#d9f720"; for (let i = 0; i < 4; i++) { let x = 100 * (i % 2); let y = 100 * Math.floor(i / 2); ctx.globalContrast = 1.5 - i * 0.45; ctx.fillRect(x, y, 100, 100); ctx.drawImage("qt_logo2.png", x, y, 100, 100); }

globalSaturation : real

レンダリング操作に適用される現在の彩度値を保持します。この彩度は、レンダリングされるすべての図形に適用されます。値を 0 に設定すると彩度が無効になり、描画は完全にグレースケールになります。また、彩度を高めるために、値を 1.0 より大きく設定することもできます。デフォルトの彩度は1.0 です。

ctx.fillStyle = "#d9f720"; for (let i = 0; i < 4; i++) { let x = 100 * (i % 2); let y = 100 * Math.floor(i / 2); ctx.globalSaturation = 1.5 - i * 0.5; ctx.fillRect(x, y, 100, 100); ctx.drawImage("qt_logo2.png", x, y, 100, 100); }

highQualityStroking : bool

現在有効になっている高品質なストロークの有効状態を維持します。これをtrue に設定すると、ストロークが重なり、不透明度が完全ではないような、あまり一般的ではないケースにおいて、より正確なレンダリングが行われます。これを有効にすると、レンダリングコストが高くなります。デフォルト値はfalse です。

// Increase the line width and reduce opacity to get // the stroking flaws visible. ctx.lineWidth = 20; ctx.globalAlpha = 0.5; if (myPath.isEmpty()) { myPath.moveTo(30, 30); myPath.lineTo(40, 30); myPath.lineTo(80, 170); myPath.lineTo(80, 30); myPath.lineTo(70, 30); } ctx.highQualityStroking = true; ctx.stroke(myPath); ctx.highQualityStroking = false; ctx.translate(90, 0); ctx.stroke(myPath);

lineCap : string

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

let path = ctx.createPath2D(); path.moveTo(40, 60); path.lineTo(160, 60); ctx.lineCap = "butt"; ctx.stroke(path); ctx.lineCap = "square"; ctx.translate(0, 40); ctx.stroke(path); ctx.lineCap = "round"; ctx.translate(0, 40); ctx.stroke(path);

lineJoin : string

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

使用可能な線の結合スタイルは以下の通りです：

let path = ctx.createPath2D(); path.moveTo(40, 20); path.lineTo(100, 80); path.lineTo(160, 40); path.lineTo(160, 70); ctx.lineJoin = "miter"; ctx.stroke(path); ctx.lineJoin = "bevel"; ctx.translate(0, 50); ctx.stroke(path); ctx.lineJoin = "round"; ctx.translate(0, 50); ctx.stroke(path);

関連項目： miterLimit 。

lineWidth : real

現在の線幅を保持します。デフォルトの線幅は `1.0` です。アンチエイリアシングが有効になっている場合、1ピクセルに収まる線幅は不透明度が自動的にフェードされ、滑らかな出力が得られます。

for (let i = 1; i < 10 ; i++) { let y = i * 20; ctx.lineWidth = 0.5 * i; ctx.beginPath(); ctx.moveTo(20, y); ctx.bezierCurveTo(80, y + 20, 120, y - 20, 180, y); ctx.stroke(); }

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

miterLimit : real

現在のマイター制限長さを保持します。マイター制限は、鋭角な角がいつ面取りされるかを制御します。角の長さがこの制限値を超えると、代わりに線と線の間に「面取り」lineJoin が適用されます。これは「マイター」の線接続方式でのみ有効です。デフォルトの制限値は10.0 です。

let path = ctx.createPath2D(); path.moveTo(20, 40); path.lineTo(30, 130); path.lineTo(40, 40); path.lineTo(55, 80); ctx.lineJoin = "miter"; ctx.miterLimit = 20; ctx.stroke(path); ctx.miterLimit = 8; ctx.translate(65, 0); ctx.stroke(path); ctx.miterLimit = 2; ctx.translate(65, 0); ctx.stroke(path);

lineJoinも参照してください 。

strokeStyle : variant

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

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

ctx.strokeStyle = "black"; ctx.strokeRect(20, 20, 160, 160); ctx.strokeStyle = Qt.rgba(0, 0.25, 0.3, 1); ctx.strokeRect(40, 40, 120, 120); ctx.strokeStyle = "#2CDE85"; ctx.strokeRect(60, 60, 80, 80);

const g1 = ctx.createLinearGradient(180, 20, 20, 180); g1.addColorStop(0, Qt.rgba(0.2, 0.8, 0.6)); g1.addColorStop(1, "black"); ctx.strokeStyle = g1; ctx.strokeRect(20, 20, 160, 160); g1.addColorStop(1, "yellow"); ctx.strokeStyle = g1; ctx.strokeRect(40, 40, 120, 120);

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

textAlign : string

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

ctx.font = "22px 'Titillium Web'"; ctx.fillRect(100, 0, 1, 200); ctx.textAlign = "left"; ctx.fillText("Left", 100, 40); ctx.textAlign = "center"; ctx.fillText("Center", 100, 70); ctx.textAlign = "right"; ctx.fillText("Right", 100, 100); ctx.textAlign = "start"; ctx.fillText("Start", 100, 130); ctx.textAlign = "end"; ctx.fillText("End", 100, 160);

textBaselineも参照してください 。

textAntialias : real

現在のテキストのアンチエイリアシング量を保持します。この値は通常のアンチエイリアシングに対する倍率であり、0.0 はアンチエイリアシングを無効にし、2.0 はアンチエイリアシングを2倍にします。デフォルト値はis 1.0です。

ctx.font = "22px 'Titillium Web'"; ctx.textAntialias = 1.0; ctx.fillText("Antialiasing: 1.0", 100, 25); ctx.textAntialias = 2.0; ctx.fillText("Antialiasing: 2.0", 100, 75); ctx.textAntialias = 3.0; ctx.fillText("Antialiasing: 3.0", 100, 125); ctx.textAntialias = 4.0; ctx.fillText("Antialiasing: 4.0", 100, 175);

textBaseline : string

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

ctx.font = "22px 'Titillium Web'"; ctx.fillRect(0, 60, 200, 1); ctx.fillRect(0, 140, 200, 1); ctx.textBaseline = "bottom"; ctx.fillText("Bottom", 40, 60); ctx.textBaseline = "middle"; ctx.fillText("Middle", 100, 60); ctx.textBaseline = "top"; ctx.fillText("Top", 160, 60); ctx.textBaseline = "alphabetic"; ctx.fillText("Alphabetic", 50, 140); ctx.textBaseline = "hanging"; ctx.fillText("Hanging", 150, 140);

textAlignも参照してください 。

textLineHeight : real

現在のテキストの行間調整量をピクセル単位で保持します。デフォルトの行間は0 です。

ctx.strokeRect(40, 5, 120, 60); ctx.strokeRect(40, 70, 120, 60); ctx.strokeRect(40, 135, 120, 60); ctx.textLineHeight = -10; ctx.fillText("Text with line height: -10", 40, 5, 120, 60); ctx.textLineHeight = 0; ctx.fillText("Text with line height: 0", 40, 70, 120, 60); ctx.textLineHeight = 10; ctx.fillText("Text with line height: 10", 40, 135, 120, 60);

textWrapMode : string

現在のテキストの折り返しモード（テキストが複数行にどのように折り返されるか）を保持します。設定可能な値は次のとおりです：

デフォルトの改行モードは「"nowrap" 」です。

ctx.strokeRect(50, 5, 100, 60); ctx.strokeRect(50, 70, 100, 60); ctx.strokeRect(50, 135, 100, 60); let s = "This is a long string."; ctx.textWrapMode = "nowrap"; ctx.fillText(s, 50, 5, 100, 60); ctx.textWrapMode = "wrap"; ctx.fillText(s, 50, 70, 100, 60); ctx.textWrapMode = "wrapanywhere"; ctx.fillText(s, 50, 135, 100, 60);

windingEnforce : bool

現在のワインディングの強制有効状態を保持します。これをfalse に設定すると、setPathWinding()で設定された内容に合わせてパスワインディングを強制する機能が無効になります。無効にすると、例えば、ポイントを時計回りの順序で追加することで、パスに穴を開けることが可能になります。また、無効にすることでパフォーマンスが向上する場合もあります。デフォルト値はtrue です。

ctx.windingEnforce = false; ctx.beginPath(); // Outer shape, counterclockwise ctx.moveTo(20, 20); ctx.lineTo(100, 180); ctx.lineTo(180, 20); ctx.closePath(); // Inner shape, clockwise ctx.moveTo(100, 40); ctx.lineTo(125, 90); ctx.lineTo(75, 90); ctx.closePath(); ctx.fill(); ctx.stroke();

メソッドのドキュメント

void addPath(path2d path, transform2d transform)

path を現在のパスに追加します。必要に応じてtransform を使用して、パスの各点を変更することもできます。transform が指定されていない場合（またはそれが単位行列である場合）、パスデータを再利用するため、この操作は非常に高速に実行されます。

// myPath is path2d property if (myPath.isEmpty()) myPath.circle(60, 60, 40); ctx.beginPath(); ctx.addPath(myPath); let t = ctx.createTransform2D(); t.translate(80, 80); ctx.addPath(myPath, t); ctx.fill(); ctx.stroke();

void addPath(path2d path, int start, int count, transform2d transform)

start のコマンドから始まり、count 個のコマンドを含むように、path を現在のパスに追加します。必要に応じて、transform を使用してパスの指す先を変更できます。start およびcount の範囲がチェックされるため、パスに含まれるコマンド数を超えてコマンドにアクセスされることはありません。現在のパス位置からパスを継続させない場合は、まずmoveTo() を呼び出してください。

// myPath is QCanvasPath if (myPath.isEmpty()) { myPath.moveTo(20, 60); for (let i = 1; i < 160; i++) { myPath.lineTo(20 + i, 60 + 20 * Math.sin(0.1 * i)); } } ctx.stroke(myPath); ctx.beginPath(); let t = ctx.createTransform2D(); t.translate(0, 80); ctx.addPath(myPath, 20, 100, t); ctx.stroke();

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

新しい円弧形状のサブパスを作成します。円弧の中心はx 、y にあり、半径はradius です。円弧は角度startAngle からendAngle まで描画されます。デフォルトの曲線方向は時計回りです。反対方向に変更するには、anticlockwise をtrueに設定してください。角度はラジアン単位で指定します。

ctx.beginPath(); ctx.moveTo(100, 100); ctx.arc(100, 100, 80, 0, 1.5 * Math.PI); ctx.closePath(); ctx.fill(); ctx.stroke();

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

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

最後のパスポイントと、指定された2つの点（x1 、y1 およびx2 、y2 ）を、radius で定義された角に弧のセグメントを追加します。必要に応じて、この弧はパスの最新のポイントと直線で自動的に接続されます。

ctx.beginPath(); ctx.moveTo(20, 20); ctx.arcTo(240, 20, 20, 220, 50); ctx.arcTo(20, 220, 20, 20, 30); ctx.stroke();

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

void beginHoleSubPath()

ホールのサブパスを開始します。これは、setPathWinding("clockwise")

ctx.beginPath(); ctx.circle(100, 100, 80); ctx.beginHoleSubPath(); ctx.rect(60, 60, 80, 80); ctx.beginSolidSubPath(); ctx.circle(100, 100, 20); ctx.fill(); ctx.stroke();

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

void beginPath()

現在のパスをクリアしながら、新しいパスの描画を開始します。

void beginSolidSubPath()

堅牢なサブパスを開始します。これは、setPathWinding("counterclockwise")

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

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

パスの最後の点から、2つの制御点（cp1x 、cp1y およびcp2x 、cp2y ）を経由して、指定された点（x 、y ）までの3次ベジエ曲線セグメントを追加します。

ctx.beginPath(); ctx.moveTo(20, 20); ctx.bezierCurveTo(150, 50, 50, 250, 180, 120); ctx.stroke();

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

void circle(real centerX, real centerY, real radius)

(centerX,centerY) を中心とし、半径radius を持つ新しい円形のサブパスを作成します。

ctx.beginPath(); ctx.circle(100, 100, 80); ctx.fill(); ctx.stroke();

void cleanupResources()

キャッシュから未使用のテクスチャを削除するスケジュール。

さらに、メモリ使用量を最小限に抑えるため、この関数の呼び出しに伴い、他のキャッシュやプールが縮小される場合があります。これにより、その後の描画処理のコストが増大する可能性があります。

void clearRect(real x, real y, real width, real height)

x 、y 、width 、height で指定された矩形を透明な黒で塗りつぶし、その領域内のピクセルを消去します。消去処理にはブレンディングが不要なため、fillRect() よりも高速に実行される場合があります。

ctx.beginPath(); ctx.circle(100, 100, 80); ctx.fill(); ctx.stroke(); ctx.clearRect(60, 0, 80, 120);

void closePath()

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

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

boxgradient2d createBoxGradient(real x, real y, real width, real height, real feather, real radius)

矩形領域（x 、y 、width 、height ）を覆うボックスグラデーションを表すboxgradient2d オブジェクトを返します。フェザー（滑らか化）feather 、角の半径radius が設定されています。

const bg = ctx.createBoxGradient(20, 20, 160, 160, 20, 50); bg.addColorStop(0.0, "#1a2a6c"); bg.addColorStop(0.2, "#fdbb2d"); bg.addColorStop(1.0, "transparent"); ctx.fillStyle = bg; ctx.fillRect(20, 20, 160, 160);

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

boxshadow2d createBoxShadow(real x, real y, real width, real height)

矩形領域（x 、y 、width 、height ）を覆うボックスシャドウを表すboxshadow2d オブジェクトを返します。

let offsetX = -2; let offsetY = 4; let shadow = ctx.createBoxShadow(40 + offsetX, 40 + offsetY, 120, 120); shadow.setBlur(30); shadow.setColor("black"); ctx.drawBoxShadow(shadow); ctx.beginPath(); ctx.roundRect(40, 40, 120, 120, 30); ctx.fillStyle = "#2CDE85"; ctx.fill();

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

boxshadow2d createBoxShadow(real x, real y, real width, real height, real blur, string color, real radius)

色color を持つboxshadow2d オブジェクトを返します。このオブジェクトは、矩形領域（x 、y 、width 、height ）を覆うボックスシャドウを表し、ぼかしblur および角の半径radius が設定されています。

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

boxshadow2d createBoxShadow(real x, real y, real width, real height, real blur, string color, real radiusTopLeft, real radiusTopRight, real radiusBottomRight, real radiusBottomLeft)

色color を持つboxshadow2d オブジェクトを返します。このオブジェクトは、矩形領域（x 、y 、width 、height ）を覆うボックスシャドウを表し、ぼかしblur および角の半径（radiusTopLeft 、radiusTopRight 、radiusBottomRight 、radiusBottomLeft ）が設定されています。

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

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

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

const cg = ctx.createConicalGradient(100, 100, 1.75 * Math.PI); cg.addColorStop(0.0, "#fdbb2d"); cg.addColorStop(0.5, "#1a2a6c"); cg.addColorStop(1.0, "#fdbb2d"); ctx.fillStyle = cg; ctx.beginPath(); ctx.ellipseRect(20, 20, 160, 160); ctx.fill();

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

gridpattern2d createGridPattern(real x, real y, real width, real height, string lineColor, string backgroundColor, real lineWidth, real feather, real angle)

矩形領域（x 、y 、width 、height ）を覆うgridpattern2d オブジェクトを返します。このグリッドでは、線にはlineColor 、背景にはbackgroundColor が使用されます。線の幅はlineWidth 、線のフェザーはfeather 、回転角度はangle （ラジアン単位）です。

const grid = ctx.createGridPattern(0, 0, 10, 10, "#404040", "#202020"); ctx.fillStyle = grid; ctx.fillRect(0, 0, 200, 200);

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

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

グラデーションには、グラデーションの開始点と終了点の間で 0 から 1 の範囲に位置する色の変化を表す、2 つ以上のカラーストップが含まれている必要があります。

const lg = ctx.createLinearGradient(0, 0, 200, 200); lg.addColorStop(0.0, "#1a2a6c"); lg.addColorStop(0.5, "#b21f1f"); lg.addColorStop(1.0, "#fdbb2d"); ctx.fillStyle = lg; ctx.fillRect(0, 0, 200, 200);

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

path2d createPath2D()

新しい Path2D オブジェクトを返します。これを呼び出すことは、HTML キャンバスの「new Path2D()」コマンドを実行することと同じです。

fill() およびstroke()も参照してください 。

path2d createPath2D(path2d path)

path のコピーを含む新しい Path2D オブジェクトを返します。この関数を呼び出すことは、HTML キャンバスの「new Path2D(path)」コマンドを実行することと同じです。

fill() およびstroke()も参照してください 。

path2d createPath2D(string svgPath)

svgPath の内容を持つ新しい path2d オブジェクトを返します。これを呼び出すことは、HTML キャンバスの「new Path2D(d)」コマンドを実行することと同じです。

fill() およびstroke()も参照してください 。

imagepattern2d createPattern(Image image, string repetition)

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

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

repetition に指定できる値は以下の通りです：

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

let ip1 = ctx.createPattern("pattern2.png", "repeat"); let ip2 = ctx.createPattern("pattern3.png", "repeat"); ip1.setImageSize(64, 64); ip2.setImageSize(32, 32); ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 40); ctx.fillStyle = ip1; ctx.strokeStyle = ip2; ctx.fill(); ctx.lineWidth = 20; ctx.stroke();

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

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

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

パラメータは4つしかなく、(x, y, r0, r1)として使用されます。ここで、中心位置は内側の半径と外側の半径の両方で同じです。

const rg = ctx.createRadialGradient(100, 100, 0, 100); rg.addColorStop(0.0, "#fdbb2d"); rg.addColorStop(0.6, "#b21f1f"); rg.addColorStop(1.0, "#1a2a6c"); ctx.fillStyle = rg; ctx.fillRect(0, 0, 200, 200);

const rg = ctx.createRadialGradient(50, 50, 0, 100, 100, 90); rg.addColorStop(0.0, "black"); rg.addColorStop(1.0, "white"); ctx.fillStyle = rg; ctx.fillRect(0, 0, 200, 200);

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

transform2d createTransform2D()

単位行列として初期化された新しい transform2d オブジェクトを返します。

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

void drawBoxShadow(boxshadow2d shadow)

指定されたボックスshadow を描画します。影は、shadow で定義された位置、サイズ、色、ぼかしなどに基づいて描画されます。このメソッドを呼び出す前にbeginPath()を呼び出す必要はありません。

let offsetX = -2; let offsetY = 4; let shadow = ctx.createBoxShadow(40 + offsetX, 40 + offsetY, 120, 120, 30, "black", 0); ctx.drawBoxShadow(shadow); ctx.beginPath(); ctx.roundRect(40, 40, 120, 120, 30); ctx.fillStyle = "#2CDE85"; ctx.fill();

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

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

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

ctx.drawImage("qt_logo.png", 36, 36);

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

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

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

ctx.drawImage("qt_logo.png", 50, 0, 100, 200);

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

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

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

ctx.drawImage("qt_logo.png", 20, 30, 54, 76, 0, 0, 200, 200);

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

void ellipse(real centerX, real centerY, real radiusX, real radiusY)

(centerX,centerY) を中心とし、radiusX 、radiusY を持つ新しい楕円形のサブパスを作成します。

ctx.beginPath(); ctx.ellipse(100, 100, 80, 60); ctx.fill(); ctx.stroke();

void ellipseRect(real x, real y, real width, real height)

rect内に、新しい楕円形のサブパスを作成します。x 、y 、width 、height 。この楕円はrectの領域を覆います。

ctx.fillRect(40, 20, 120, 160); ctx.beginPath(); ctx.ellipseRect(40, 20, 120, 160); ctx.stroke();

void fill()

現在のパスに、現在の塗りつぶしスタイルと塗りつぶしルールを適用します。

ctx.beginPath(); ctx.rect(20, 20, 40, 160); ctx.rect(140, 20, 40, 160); ctx.circle(100, 100, 60); ctx.fill();

fillStyle 、fillRule 、およびW3Cの2Dコンテキスト標準（塗りつぶしに関する部分）も参照してください 。

void fill(string fillRule)

現在のパスを、現在の塗りつぶしスタイルと塗りつぶしルール「fillRule 」で塗りつぶします。

「 fillStyle 」および「fillRule 」も参照してください 。

void fill(path2d path, int pathGroup)

path に、現在の塗りつぶしスタイルと塗りつぶしルールを適用し、オプションのpathGroup に所属させます。QCanvasPath による描画は、パスに含まれるコマンドが多く、かつその大部分が静的な場合に最適です。

pathGroup が-1 の場合、パスはGPU側でキャッシュされません。これがデフォルトの設定です。パスデータのキャッシュを要求するには、0 以上の値を指定してください。パスキャッシュグループの使用に関する詳細については、QCanvasPath のドキュメントを参照してください。

このメソッドを呼び出す前にbeginPath() を呼び出す必要はありません。

// myPath is path2d if (myPath.isEmpty()) { for (let i = 0; i < 16; i++) { let w = 100 + 60 * Math.sin(i); myPath.rect(100 - w * 0.5, 22 + i * 10, w, 6); } } ctx.fill(myPath);

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

void fill(path2d path, string fillRule, int pathGroup)

path を、現在の塗りつぶしスタイルで、fillRule を使用して塗りつぶします。キャッシュグループパラメータpathGroup は省略可能です。

fillStyle 、fillRule 、およびpath2dも参照してください 。

void fillRect(real x, real y, real width, real height)

指定された位置（x 、y ）に、サイズwidth 、height の塗りつぶされた長方形を描画します。

ctx.fillRect(20, 20, 160, 160); // The above code does same as: // ctx.beginPath(); // ctx.rect(20, 20, 160, 160); // ctx.fill();

fillStyleも参照してください 。

void fillText(text, x, y, maxWidth)

指定された位置（x 、y ）に、text 文字列を描画します。この際、現在のtextAlign およびtextBaseline が適用されます。テキストを複数行に折り返すには、textWrapMode を使用して、デフォルトの"nowrap" 以外の値にテキスト折り返しモードを設定してください。オプションのmaxWidth パラメータのデフォルト値は0 です。つまり、例えば"wordwrap" が設定されている場合、テキストは単語ごとに折り返されます。maxWidth パラメータには、希望する行幅をピクセル単位で指定してください。

ctx.textAlign = "center"; ctx.textBaseline = "middle"; const text = "Qt Canvas Painter"; ctx.fillText(text, 100, 30); ctx.textWrapMode = "wordwrap"; ctx.fillText(text, 100, 90); ctx.fillText(text, 100, 160, 120);

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

void fillText(text, x, y, width, height)

rect（x 、y 、width 、height ）内に、text の文字列を描画します。この際、現在のtextAlign およびtextBaseline が使用されます。rectパラメータの幅がmaxWidthとして使用されます。

このメソッドでテキストを描画する際、テキストのベースラインをTextBaseline::Top またはTextBaseline::Middle に設定すると便利な場合が多い。

ctx.textAlign = "center"; ctx.textBaseline = "middle"; const text = "Qt Canvas Painter"; ctx.strokeRect(10, 20, 180, 50); ctx.fillText(text, 10, 20, 180, 50); ctx.textWrapMode = "wordwrap"; ctx.strokeRect(60, 90, 80, 90); ctx.fillText(text, 60, 90, 80, 90);

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

transform2d getTransform()

現在の変換行列を返します。

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

void lineTo(real x, real y)

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

ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(140, 180); ctx.lineTo(180, 120); ctx.stroke();

object measureText(text)

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

void moveTo(real x, real y)

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

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

パスの最後の点から、制御点（cpx 、cpy ）を経由して、指定された点（x 、y ）に至る2次ベジエセグメントを追加します。

ctx.beginPath(); ctx.moveTo(20, 20); ctx.quadraticCurveTo(150, 50, 180, 180); ctx.quadraticCurveTo(20, 220, 20, 20); ctx.fill(); ctx.stroke();

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

void rect(real x, real y, real width, real height)

座標x 、y の位置に、サイズwidth 、height の新しい長方形のサブパスを作成します。

ctx.beginPath(); ctx.rect(20, 20, 160, 160); ctx.fill(); ctx.stroke();

void removePathGroup(int pathGroup)

pathGroup をペインターキャッシュから削除します。この後、pathGroup に対してfill()またはstroke()を呼び出すと、パスがグループキャッシュに再生成されます。

関連項目： fill() およびstroke()。

void reset()

現在のペインターの状態をデフォルト値にリセットします。

// Adjust the paint state ctx.strokeStyle = "#00414A"; ctx.fillStyle = "#2CDE85"; ctx.lineWidth = 10; ctx.translate(100, 65); ctx.rotate(-0.4); ctx.translate(-100, -65); ctx.beginPath(); ctx.roundRect(20, 40, 160, 50, 20); ctx.fill(); ctx.stroke(); // Reset to default paint state ctx.reset(); ctx.fillRect(20, 140, 60, 40); ctx.strokeRect(120, 140, 60, 40);

関連項目： save() およびrestore()。

void resetClipping()

クリッピングをリセットし、無効にします。

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

void resetTransform()

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

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

void restore()

現在のレンダリング状態をポップして復元します。これにより、以前に保存された状態が復元されます。save() が呼び出されておらず、状態スタックが空の場合、これを呼び出しても何も起こりません。

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

void rotate(real angle)

現在の座標系をangle だけ時計回りに回転させます。

角度はラジアン単位で指定します。

ctx.translate(100, 100); ctx.rotate(Math.PI / 4); ctx.translate(-100, -100); ctx.beginPath(); ctx.roundRect(20, 70, 160, 60, 10); ctx.fill(); ctx.stroke(); ctx.fillStyle = "black"; ctx.fillText("Cute!", 100, 100);

void roundRect(real x, real y, real width, real height, real radius)

座標x 、y の位置に、サイズwidth 、height の新しい角丸長方形のサブパスを作成します。角の丸み半径はradius になります。

ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 30); ctx.fill(); ctx.stroke();

void roundRect(real x, real y, real width, real height, real radiusTopLeft, real radiusTopRight, real radiusBottomRight, real radiusBottomLeft)

座標x 、y の位置に、サイズwidth 、height の新しい角丸長方形形状のサブパスを作成します。角の丸み具合は、radiusTopLeft 、radiusTopRight 、radiusBottomRight 、radiusBottomLeft のように、角ごとに異なる設定が可能です。

ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 0, 40, 20, 80); ctx.fill(); ctx.stroke();

void save()

現在のレンダリング状態をステートスタックにプッシュして保存します。状態を復元するには、対応するrestore() メソッドを使用する必要があります。

ctx.strokeRect(20, 20, 160, 40); // Save and adjust the paint state ctx.save(); ctx.strokeStyle = "black"; ctx.lineWidth = 3; ctx.rotate(0.1); ctx.strokeRect(20, 80, 180, 20); // Restore the saved paint state ctx.restore(); ctx.strokeRect(20, 140, 160, 40);

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

void scale(real scale)

現在の座標系をscale 倍に拡大・縮小します。x座標とy座標の両方が均等に拡大・縮小されます。

for (let i = 0; i < 20; i++) { ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 10); ctx.stroke(); ctx.translate(100, 100); ctx.scale(0.8); ctx.translate(-100, -100); }

void scale(real sx, real sy)

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

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

ctx.scale(2.0, 0.5);

void setClipRect(real x, real y, real width, real height)

現在のクリッピング矩形を (x,y,width,height) に設定します。クリッピング矩形は、現在のトランスフォームによって変形されます。

ctx.setClipRect(20, 20, 160, 160); ctx.beginPath(); ctx.circle(40, 40, 110); ctx.fill(); ctx.fillStyle = "black"; ctx.fillText("Clip me...", 45, 100); ctx.strokeRect(20, 20, 160, 160);

関連項目： resetClipping()。

void setPathWinding(string winding)

現在のサブパスwinding を「counterclockwise」（デフォルト）または「clockwise」のいずれかに設定します。「counterclockwise」では実線のサブパスが描画され、「clockwise」では穴が描画されます。

ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 40); ctx.setPathWinding("clockwise"); ctx.circle(140, 60, 20); ctx.rect(60, 120, 80, 30); ctx.fill(); ctx.stroke();

beginHoleSubPath() およびbeginSolidSubPath()も参照してください 。

void setTransform(transform2d transform)

現在のトランスフォームをリセットし、代わりにtransform を使用します。

ctx.beginPath(); ctx.roundRect(80, 20, 40, 40, 10); ctx.fill(); ctx.stroke(); let t = ctx.createTransform2D(); t.translate(100, 20); t.rotate(45); t.scale(2.0, 2.0); ctx.setTransform(t); ctx.beginPath(); ctx.roundRect(20, 20, 40, 40, 10); ctx.fill(); ctx.stroke();

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

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

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

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

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

• a は水平（x）方向の拡大率
• c は x 方向のスキュー係数
• e は x 方向の平行移動量
• b は y（垂直）方向のスキュー係数
• d は y 方向の拡大率
• f は y 方向の平行移動量
• 最後の行は一定である

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

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

void skew(real angleX, real angleY)

現在の座標系を、X軸方向にangleX 、Y軸方向にangleY だけ傾斜（せん断）させます。パラメータが1つだけ指定された場合、angleY のデフォルト値は0 です。角度はラジアン単位で指定します。

ctx.translate(100, 100); ctx.skew(-0.6); ctx.translate(-100, -100); ctx.beginPath(); ctx.roundRect(40, 70, 120, 60, 10); ctx.fill(); ctx.stroke(); ctx.fillStyle = "black"; ctx.fillText("Cute!", 100, 100);

void stroke()

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

ctx.beginPath(); ctx.rect(20, 20, 40, 160); ctx.rect(140, 20, 40, 160); ctx.circle(100, 100, 60); ctx.stroke();

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

void stroke(path2d path, int pathGroup)

path を、現在のストロークスタイルで描画し、pathGroup に属するようにします。QCanvasPath による描画は、パスに含まれるコマンドが多く、かつその大部分が静的な場合に最適です。

pathGroup が-1 の場合、パスのレンダリング関連データはキャッシュされません。これがデフォルトの設定です。パスデータのキャッシュを要求するには、0 以上の値を指定してください。パスキャッシュグループの使用に関する詳細については、QCanvasPath のドキュメントを参照してください。

このメソッドを呼び出す前にbeginPath() を呼び出す必要はありません。

// myPath is path2d if (myPath.isEmpty()) { for (let i = 0; i < 16; i++) { let h = 100 + 60 * Math.sin(i); myPath.rect(22 + i * 10, 180 - h, 6, h); } } ctx.stroke(myPath);

strokeStyle 、path2d 、およびW3C 2D コンテキスト標準の strokeについても参照してください 。

void strokeRect(real x, real y, real width, real height)

指定された位置（x 、y ）に、サイズwidth 、height の線画付き長方形を描画します。

ctx.strokeRect(20, 20, 160, 160); // The above code does same as: // ctx.beginPath(); // ctx.rect(20, 20, 160, 160); // ctx.stroke();

関連項目： strokeStyle 、lineWidth 、lineJoin 、およびmiterLimit 。

void transform(transform2d transform)

現在の座標系に、指定されたtransform を乗算します。

let t = ctx.createTransform2D(); t.translate(100, 100); t.rotate(36); t.translate(-100, -100); for (let i = 0; i < 10; i++) { ctx.transform(t); ctx.beginPath(); ctx.roundRect(80, 15, 40, 20, 10); ctx.fill(); ctx.stroke(); }

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

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

現在の座標系に、指定された変換（a 、b 、c 、d 、e 、f ）を乗算します。

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

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

void translate(real x, real y)

現在の座標系を、x およびy によって変換します。

function paintRect() { ctx.beginPath(); ctx.roundRect(20, 20, 160, 60, 10); ctx.fill(); ctx.stroke(); }; paintRect(); ctx.translate(0, 100); paintRect();