Context2D QML 类型

包含上下文所绘的画布项。

此属性为只读。

包含用于填充形状的当前填充规则。支持以下填充规则

另请参阅：fillStyle。

包含用于填充形状的当前样式。样式可以是包含 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(red, green, blue, alpha) - 例如：Qt.rgba(0.3, 0.7, 1, 1.0)

如果 fillStyle 或 strokeStyle 在循环中被多次分配，则应选择最后一个 Qt.rgba() 语法，因为它具有最好的性能，因为它已经是有效的 QColor 值，不需要每次都进行解析。

默认值为 '#000000'。

另请参阅：createLinearGradient()，createRadialGradient()，createPattern()，以及 strokeStyle。

包含当前的字体设置。

支持 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"。

包含应用于渲染操作的当前 alpha 值。值必须在 0.0（完全透明）到 1.0（完全不透明）的范围内。默认值为 1.0。

包含当前合成操作。允许的操作包括：

遵循 W3C 标准，在基本操作之外，通过 "vendorName-operationName" 的语法提供了扩展合成模式，例如：QPainter::CompositionMode_Exclusion 以 "qt-exclusion" 的形式提供。

包含当前线帽样式。可能的线帽样式有：

其他值将被忽略。

存储当前的虚线偏移。默认虚线偏移值为 0。

此属性自 QtQuick 2.11 版本引入。

另请参阅getLineDash() 和 setLineDash()。

存储当前的线连接样式。在两个连续线条共享的子路径上的任何点都存在一个连接。当子路径关闭时，其第一点（相当于最后一点）也存在连接，连接子路径中的第一行和最后一行。

可能的线连接样式有

其他值将被忽略。

存储当前的线宽。非有限值大于零的值将被忽略。

存储当前的斜接限界比例。默认斜接限界值为 10.0。

存储应用于阴影的模糊级别

存储当前的阴影颜色。

存储当前阴影在正横向距离中的偏移。

另请参阅shadowOffsetY。

存储当前阴影在正纵向距离中的偏移。

另请参阅shadowOffsetX。

存储用于形状周围线条的当前颜色或样式。样式可以是包含 CSS 颜色的字符串、CanvasGradient 或 CanvasPattern 对象。无效的值将被忽略。

默认值为 '#000000'。

另请参阅createLinearGradient()，createRadialGradient()，createPattern 和 fillStyle。

存储当前的文本对齐设置。可能的值为

其他值将被忽略。

存储当前的基线对齐设置。可能的值为

其他值将被忽略。默认值是 "alphabetic"。

将一个弧线添加到当前子路径中，该弧线位于以点（x，y）为中心、半径为radius的圆的圆周上。

startAngle和endAngle都是以弧度为单位从x轴测量的。

anticlockwise参数对于上图中每个弧线都是false，因为它们都是顺时针方向绘制的。

另请参阅arcTo和。W3C的2D上下文标准中的arc()。

将具有给定控制点和半径的弧线添加到当前子路径中，并通过直线连接到前一个点。要绘制一个弧线，你将从创建线的相同步骤开始。

• 调用beginPath()方法设置一个新的路径。
• 调用moveTo(x，y)方法将你的起始位置设置在画布上的点(x，y)。
• 要绘制弧线或圆，请调用arcTo(x1，y1，x2，y2，radius)方法。这将向当前子路径中添加一个以（x1，y1）为起点，（x2，y2）为终点，半径为radius的弧线，并通过直线将它与前一个子路径连接起来。

另请参阅arc和。W3C的2D上下文标准中的arcTo()。

将当前路径重置为新路径。

使用由（cp1x，cp1y）和（cp2x，cp2y）指定的控制点在当前位点和指定的终点之间添加一个三次贝塞尔曲线。曲线添加后，当前点将更新为曲线的终点（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();

另请参阅W3C 2D上下文标准中的bezierCurveTo和使用bezierCurveTo绘制的美丽花朵演示。

清除指定的矩形（x，y，w，h）内画布上的所有像素为透明的黑色。

从当前路径创建裁剪区域。形状任何超出裁剪路径的部分将不再显示。要使用clip()方法创建复杂形状

1. 调用context.beginPath()方法设置裁剪路径。
2. 通过调用任何组合的lineTo、arcTo、arc、moveTo等方法和closePath方法来定义裁剪路径。
3. 调用context.clip()方法。

新的形状将显示。以下显示了裁剪路径如何修改图像的显示

另请参阅beginPath（），closePath（），stroke（），fill（），以及W3C 2d context standard for clip。

通过绘制一条线到子路径的开始来关闭当前的子路径，自动开始一个新的路径。新路径的当前点是前一个子路径的第一个点。

另请参阅W3C 2d context standard for closePath。

返回一个CanvasGradient对象，表示以顺时针方向在大致点（x，y）为中心，以弧度计量起始角angle进行颜色插值的圆锥渐变。

另请参阅CanvasGradient::addColorStop（），createLinearGradient（），createRadialGradient（），createPattern（），fillStyle和strokeStyle。

创建具有指定维度的CanvasImageData对象（sw，sh）。

创建与imageData参数相同维度的CanvasImageData对象。

通过从imageUrl加载给定图像来创建CanvasImageData对象。

另请参阅Canvas::loadImage（），QtQuick::Canvas::unloadImage（）和QtQuick::Canvas::isImageLoaded（）。

返回一个表示从起点（x0，y0）到终点（x1，y1）颜色过渡的线性渐变的CanvasGradient对象。

渐变是颜色之间的平滑过渡。有两种类型的渐变：线性渐变和径向渐变。渐变必须有两个或多个颜色停靠点，表示从0到1之间在渐变起点和终点或圆之间的颜色变化。

查看也请CanvasGradient::addColorStop（），createRadialGradient（），createConicalGradient（），createPattern（），fillStyle，和strokeStyle。

这是一个重载函数。返回一个使用给定的color和patternMode的CanvasPattern对象。有效的图案模式有

查看也请Qt::BrushStyle。

返回一个使用给定的图像和重复性参数给定方向重复的CanvasPattern对象。

image参数必须是有效的Image项，有效的CanvasImageData对象或已加载的图像URL。如果没有图像数据，则此函数抛出INVALID_STATE_ERR异常。

repetition的有效值有

如果重复参数为空或为空，则使用“repeat”值。

查看也请strokeStyle和fillStyle。

返回一个表示从起点圆（x0，y0）半径r0和终点圆（x1，y1）半径r1画出的圆锥的径向渐变的CanvasGradient对象。

也请参阅 CanvasGradient::addColorStop()，createLinearGradient()，createConicalGradient()，createPattern()，fillStyle和strokeStyle。

在画布上的位置（dx，dy）绘制给定的image。注意：image类型可以是图像项、图像URL或CanvasImageData对象。当作为图像项给出时，如果图像未完全加载，该方法将不会绘制任何内容。当作为URL字符串给出时，应首先调用Canvas项的Canvas::loadImage()方法来加载图像。正在绘制的图像将受到当前上下文的裁剪路径的约束，即使给定的image是CanvasImageData对象。

也请参阅 CanvasImageData，Image，Canvas::loadImage()，Canvas::isImageLoaded，Canvas::imageLoaded以及W3C 2d context标准中的drawImage。

这是一个重载函数。将给定的项以图像的形式绘制到画布上，位置为（dx，dy）并且宽为dw，高为dh。

注意：image类型可以是图像项、图像URL或CanvasImageData对象。当作为图像项给出时，如果图像未完全加载，该方法将不会绘制任何内容。当作为URL字符串给出时，应首先调用Canvas项的Canvas::loadImage()方法来加载图像。正在绘制的图像将受到当前上下文的裁剪路径的约束，即使给定的image是CanvasImageData对象。

也请参阅 CanvasImageData，Image，Canvas::loadImage，Canvas::isImageLoaded，Canvas::imageLoaded以及W3C 2d context标准对drawImage的支持。

这是一个重载的函数。从源点（sx，sy）和源宽度 sw、源高度 sh绘制给定的项目作为图像，并将它与宽度 dw、高度 dh画到画布上的点（dx，dy）。

注意：图像类型可以是图像或画布项目、图像URL或CanvasImageData对象。如果作为图像项目给出，如果图像未完全加载，则此方法将不会绘制任何内容。如果作为URL字符串给出，则应首先通过调用画布项目的Canvas::loadImage()方法来加载图像。此图像在当前环境剪辑路径的约束下绘制，即使给定的image是CanvasImageData对象。

也请参阅 CanvasImageData，Image，Canvas::loadImage，Canvas::isImageLoaded，Canvas::imageLoaded以及W3C 2d context标准对drawImage的支持。

在定义左上角为（x，y），宽度 w和高度 h的边界矩形内创建一个椭圆，并将其作为封闭子路径添加到路径中。

椭圆由顺时针方向曲线组成，起点和终点为0度（3点钟位置）。

使用当前填充样式填充子路径。

另请参阅W3C 2d context标准填充和fillStyle。

用fillStyle绘制指定坐标（x，y，w，h）的矩形区域。

另请参阅：fillStyle。

在指定的位置（x，y）填充指定的文本。

另请参阅font，textAlign，textBaseline和strokeText。

返回一个CanvasImageData对象，该对象包含由（x，y，w，h）指定的画布矩形的图像数据。

返回表示线划线模式的qreal数组。

此方法是在QtQuick 2.11中引入的。

另请参阅setLineDash()和lineDashOffset。

如果点（x，y）在当前路径上，则返回true。

另请参阅W3C isPointInPath 2D上下文标准。

从当前位置绘制到点（x，y）。

返回一个具有width属性的对象，其值等同于在当前字体中调用QFontMetrics::horizontalAdvance()得到的文本。

从点（x，y）创建一个新的子路径。

将给定imageData对象的数据绘制到画布上（dx，dy）。

如果提供了脏矩形（dirtyX，dirtyY，dirtyWidth，dirtyHeight），则仅绘制该矩形的像素。

在当前点和终点（x，y）之间添加一个二次贝塞尔曲线，控制点由（cpx，cpy）指定。

另请参阅W3C quadraticCurveTo 2D上下文标准。

在位置（x，y）添加一个矩形，宽度为w，高度为h，作为一个封闭的子路径。

将上下文状态和属性重置为默认值。

将变换矩阵重置为默认值（相当于调用setTransform(1，0，0，1，0，0)))。

另请参阅transform()，setTransform() 和 reset()。

弹出栈顶状态，恢复上下文到该状态。

另请参阅save()。

按顺时针方向以弧度角的angle旋转画布。

ctx.rotate(Math.PI/2);

旋转变换矩阵如下

其中旋转角度angle以弧度为单位。

将指定为（x，y，w，h）的圆角矩形添加到路径。参数xRadius和yRadius指定定义圆角矩形角的椭圆的半径。

将当前状态推入状态堆栈中。

在更改任何状态属性之前，您应该保存当前状态以供将来参考。上下文维护一个绘图状态堆栈。每个状态包括当前变换矩阵、剪切区域以及以下属性的值

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

当前路径不是绘图状态的一部分。可以通过调用 beginPath() 方法来重置路径。

通过将缩放因子乘到当前变换矩阵上来增加或减少canvas网格中每个单位的大小。x是水平方向的缩放因子，y是垂直方向的缩放因子。

以下代码将canvas上绘制对象的横向大小加倍，并将纵向大小减半

ctx.scale(2.0, 0.5);

将虚线图案设置为给定的模式。

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.

按照以下描述将变换矩阵更改为由参数给出的矩阵。

直接修改变换矩阵可以让你在一个操作中执行缩放、旋转和平移变换。

在绘制任何内容之前，每个画布上的点都会乘以矩阵。HTML Canvas 2D 上下文规范将变换矩阵定义为

其中

• a 是x方向的缩放因子

  

• c 是x方向的倾斜因子

  

• e 是x方向的平移

  

• b 是y方向（垂直）的倾斜因子

  

• d 是y方向的缩放因子

  

• f 是y方向的平移

  

• 最后一行保持不变

缩放因子和倾斜因子是倍数；e 和 f 是坐标系单位，就像 translate(x,y) 方法中的单位一样。

另请参阅 transform()。

通过水平和垂直方向上的 sh 和 sv 对变换矩阵进行剪切。

使用当前画笔样式绘制子路径。

另请参阅 strokeStyle 以及 W3C 2d context 标准的 stroke。

使用 strokeStyle、lineWidth、lineJoin 以及（如果适用）miterLimit 属性，绘制由 (x, y, w, h) 确定的矩形的路径。

另请参阅 strokeStyle、lineWidth、lineJoin 以及 miterLimit。

在指定的位置（《i translate="no">x，y》）绘制给定的 text。

另请参阅 font、textAlign、textBaseline 以及 fillText。

使用当前上下文字体添加给定的 text 作为一组闭合子路径。

子路径定位于文本基线左端在点 (x，y)。

此方法与 setTransform() 非常相似，但不是替换旧的变换矩阵，而是通过乘法将该变换矩阵应用于当前矩阵。

setTransform(a，b，c，d，e，f) 方法实际上将当前变换重置为单位矩阵，然后使用相同的参数调用变换(a，b，c，d，e，f) 方法。

另请参阅 setTransform。

在坐标空间单位中以水平距离 x 和垂直距离 y 移动画布的原点。

将原始对象转换成简化模式可以使您在画布上绘制不同的对象图案，而无需手动测量每个形状的坐标。