1# OffscreenCanvasRenderingContext2D 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到Canvas上。离屏绘制使用CPU进行绘制，绘制速度较慢，对绘制速度有要求的场景应避免使用离屏绘制。 10 11> **说明：** 12> 13> 从 API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> OffscreenCanvasRenderingContext2D无法在ServiceExtensionAbility中使用，ServiceExtensionAbility中建议使用[Drawing模块](../../apis-arkgraphics2d/arkts-apis-graphics-drawing.md)进行离屏绘制。 16> 17> [beginPath](#beginpath)、[moveTo](#moveto)、[lineTo](#lineto)、[closePath](#closepath)、[bezierCurveTo](#beziercurveto)、[quadraticCurveTo](#quadraticcurveto)、[arc](#arc)、[arcTo](#arcto)、[ellipse](#ellipse)、[rect](#rect)和[roundRect](#roundrect20)接口只能对OffscreenCanvasRenderingContext2D中的路径生效，无法对[CanvasRenderingContext2D](./ts-canvasrenderingcontext2d.md)和[Path2D](./ts-components-canvas-path2d.md)对象中设置的路径生效。 18 19## 构造函数 20 21### constructor 22 23constructor(width: number, height: number, settings?: RenderingContextSettings) 24 25构造离屏Canvas画布对象，支持配置画布宽高和OffscreenCanvasRenderingContext2D对象的参数。 26 27**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33**参数：** 34 35| 参数名 | 类型 | 必填 | 说明 | 36| -------- | ---------------------------------------- | ---- | ------------------------------ | 37| width | number | 是 | 离屏画布的宽度，默认单位：vp | 38| height | number | 是 | 离屏画布的高度，默认单位：vp | 39| settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 否 | 用来配置OffscreenCanvasRenderingContext2D对象的参数，见RenderingContextSettings接口描述。<br>默认值：null | 40 41### constructor<sup>12+<sup> 42 43constructor(width: number, height: number, settings?: RenderingContextSettings, unit?: LengthMetricsUnit) 44 45构造离屏Canvas画布对象，支持配置画布宽高、OffscreenCanvasRenderingContext2D对象的参数和单位模式。 46 47**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 48 49**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| -------- | ---------------------------------------- | ---- | ------------------------------ | 57| width | number | 是 | 离屏画布的宽度，默认单位：vp | 58| height | number | 是 | 离屏画布的高度，默认单位：vp | 59| settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 否 | 用来配置OffscreenCanvasRenderingContext2D对象的参数，见RenderingContextSettings接口描述。<br>默认值：null | 60| unit | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置OffscreenCanvasRenderingContext2D对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)。<br>默认值：DEFAULT| 61 62## 属性 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66| 名称 | 类型 | 只读 | 可选 | 说明 | 67| ---- | ---- | ---- | ---- | ---- | 68| [fillStyle](#fillstyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md) | 否 | 否 | 指定绘制的填充色，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>- 类型为string时，表示设置填充区域的颜色，颜色格式参考[ResourceColor](ts-types.md#resourcecolor)中string类型说明。<br/>- 类型为number时，表示设置填充区域的颜色，不支持设置全透明色，颜色格式参考[ResourceColor](ts-types.md#resourcecolor)中number类型说明。<br/>- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>默认值：'#000000'（黑色）<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 69| [lineWidth](#linewidth) | number | 否 | 否 | 设置绘制线条的宽度，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>默认值：1(px)<br/>默认单位：vp<br/>lineWidth取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 70| [strokeStyle](#strokestyle) | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md) | 否 | 否 | 设置线条的颜色，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>- 类型为string时，表示设置线条使用的颜色，颜色格式参考[ResourceColor](ts-types.md#resourcecolor)中string类型说明。<br/>- 类型为number时，表示设置线条使用的颜色，不支持设置全透明色，颜色格式参考[ResourceColor](ts-types.md#resourcecolor)中number类型说明。<br/>- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>默认值：'#000000'（黑色）<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 71| [lineCap](#linecap) | [CanvasLineCap](ts-canvasrenderingcontext2d.md#canvaslinecap类型说明) | 否 | 否 | 指定线端点的样式，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>可选值为：<br/>- 'butt'：线端点以方形结束。<br/>- 'round'：线端点以圆形结束。<br/>- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>默认值：'butt'<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 72| [lineJoin](#linejoin) | [CanvasLineJoin](ts-canvasrenderingcontext2d.md#canvaslinejoin类型说明) | 否 | 否 | 指定线段间相交的交点样式，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>可选值为：<br/>- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。<br/>- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>默认值：'miter'<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 73| [miterLimit](#miterlimit) | number | 否 | 否 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>默认值：10px<br/>单位：px。 <br/>miterLimit取值不支持0和负数，0和负数按异常值处理，异常值按默认值处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 74| [font](#font) | string | 否 | 否 | 设置文本绘制中的字体样式，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>语法：ctx.font = 'font-style font-weight font-size font-family'<br/>- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。<br/>- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。<br/>- font-size(可选)，指定字号和行高，单位支持px、vp。使用时需要添加单位。<br/>- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。API version 20及以后支持注册过的自定义字体（只能在主线程使用，不支持在worker线程中使用；DevEco Studio的预览器不支持显示自定义字体），具体使用方法参考自定义字体[font](#font)示例。<br/>默认值：'normal normal 14px sans-serif'<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 75| [textAlign](#textalign) | [CanvasTextAlign](ts-canvasrenderingcontext2d.md#canvastextalign类型说明) | 否 | 否 | 设置文本绘制中的文本对齐方式，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>可选值为：<br/>- 'left'：文本左对齐。<br/>- 'right'：文本右对齐。<br/>- 'center'：文本居中对齐。<br/>- 'start'：文本对齐界线开始的地方。<br/>- 'end'：文本对齐界线结束的地方。<br/>> **说明：**<br/>> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致。<br/>默认值：'left'<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 76| [textBaseline](#textbaseline) | [CanvasTextBaseline](ts-canvasrenderingcontext2d.md#canvastextbaseline类型说明) | 否 | 否 | 设置文本绘制中的水平对齐方式，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>可选值为：<br/>- 'alphabetic'：文本基线是标准的字母基线。<br/>- 'top'：文本基线在文本块的顶部。<br/>- 'hanging'：文本基线是悬挂基线。<br/>- 'middle'：文本基线在文本块的中间。<br/>- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideographic基线位置在字符本身的底部。<br/>- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值：'alphabetic'<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 77| [globalAlpha](#globalalpha) | number | 否 | 否 | 设置透明度，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>范围为[0.0, 1.0]，0.0为完全透明，1.0为完全不透明。若给定值小于0.0，则取值0.0；若给定值大于1.0，则取值1.0。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制。API version 18及以后，设置NaN或Infinity时当前接口不生效，其他传入有效参数的绘制方法正常绘制。<br/>默认值：1.0<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 78| [lineDashOffset](#linedashoffset) | number | 否 | 否 | 设置画布的虚线偏移量，精度为float，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>默认值：0.0<br/>单位：vp。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 79| [globalCompositeOperation](#globalcompositeoperation) | string | 否 | 否 | 设置合成操作的方式，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。<br/>- 默认值：'source-over'<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 80| [shadowBlur](#shadowblur) | number | 否 | 否 | 设置绘制阴影时的模糊级别，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>值越大越模糊，精度为float，取值范围≥0。 <br/>默认值：0.0<br/>单位：px。<br/>shadowBlur取值不支持负数，负数按异常值处理，异常值按默认值处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 81| [shadowColor](#shadowcolor) | string | 否 | 否 | 设置绘制阴影时的阴影颜色，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>颜色格式参考[ResourceColor](ts-types.md#resourcecolor)中string类型说明。<br/>默认值：透明黑色<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 82| [shadowOffsetX](#shadowoffsetx) | number | 否 | 否 | 设置绘制阴影时和原有对象的水平偏移值，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>默认值：0.0<br/>默认单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 83| [shadowOffsetY](#shadowoffsety) | number | 否 | 否 | 设置绘制阴影时和原有对象的垂直偏移值，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>默认值：0.0<br/>默认单位：vp<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 84| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 否 | 否 | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>默认值：true<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 85| [imageSmoothingQuality](#imagesmoothingquality) | [ImageSmoothingQuality](ts-canvasrenderingcontext2d.md#imagesmoothingquality类型说明) | 否 | 否 | imageSmoothingEnabled为true时，用于设置图像平滑度，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>可选值为：<br/>- 'low'：低画质<br/>- 'medium'：中画质<br/>- 'high'：高画质。<br/>默认值："low"<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 86| [direction](#direction) | [CanvasDirection](ts-canvasrenderingcontext2d.md#canvasdirection类型说明) | 否 | 否 | 用于设置绘制文字时使用的文字方向，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>可选值为：<br/>- 'inherit'：使用系统默认布局方向<br/>- 'ltr'：从左往右<br/>- 'rtl'：从右往左。<br/>默认值："inherit"<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 87| [filter](#filter) | string | 否 | 否 | 用于设置图像的滤镜，可以组合任意数量的滤镜，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>支持的滤镜效果如下：<br/>- 'none': 无滤镜效果。<br/>- 'blur(\<length>)'：给图像设置高斯模糊，取值范围≥0，支持单位px、vp、rem，默认单位：vp，默认值：blur(0px)。<br/>- 'brightness([\<number>\|\<percentage>])'：给图片应用一种线性乘法，使其看起来更亮或更暗，支持数字和百分比参数，取值范围≥0，默认值：brightness(1)。<br/>- 'contrast([\<number>\|\<percentage>])'：调整图像的对比度，支持数字和百分比参数，取值范围≥0，默认值：contrast(1)。<br/>- 'grayscale([\<number>\|\<percentage>])'：将图像转换为灰度图像，支持数字和百分比参数，取值范围[0, 1]，默认值：grayscale(0)。<br/>- 'hue-rotate(\<angle>)'：给图像应用色相旋转，取值范围0deg-360deg，默认值：hue-rotate(0deg)。<br/>- 'invert([\<number>\|\<percentage>])'：反转输入图像，支持数字和百分比参数，取值范围[0, 1]，默认值：invert(0)。<br/>- 'opacity([\<number>\|\<percentage>])'：转化图像的透明程度，支持数字和百分比参数，取值范围[0, 1]，默认值：opacity(1)。<br/>- 'saturate([\<number>\|\<percentage>])'：转换图像饱和度，支持数字和百分比参数，取值范围≥0，默认值：saturate(1)。<br/>- 'sepia([\<number>\|\<percentage>])'：将图像转换为深褐色，支持数字和百分比参数，取值范围[0, 1]，默认值：sepia(0)。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。| 88| [letterSpacing<sup>18+</sup>](#letterspacing18) | string \| [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 否 | 用于指定绘制文本时字母之间的间距，此属性为只写属性，可通过赋值语句设置其值，但无法通过读取操作获取其当前值，若尝试读取将返回undefined。<br/>当使用LengthMetrics时：<br/>字间距按照指定的单位设置；<br/>不支持FP、PERCENT和LPX（按无效值处理）；<br/>支持负数和小数，设为小数时字间距不四舍五入。<br/>当使用string时：<br/>不支持设置百分比（按无效值处理）；<br/>支持负数和小数，设为小数时字间距不四舍五入；<br/>若letterSpacing的赋值未指定单位（例如：letterSpacing='10'），且未指定LengthMetricsUnit时，默认单位设置为vp；<br/>指定LengthMetricsUnit为px时，默认单位设置为px；<br/>当letterSpacing的赋值指定单位时（例如：letterSpacing='10vp'），字间距按照指定的单位设置。<br/>默认值：0（输入无效值时，字间距设为默认值）<br/>注：推荐使用LengthMetrics，性能更好。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 89 90> **说明：** 91> fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 92 93 94### fillStyle 95 96```ts 97// xxx.ets 98@Entry 99@Component 100struct FillStyleExample { 101 private settings: RenderingContextSettings = new RenderingContextSettings(true); 102 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 103 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 104 105 build() { 106 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 107 Canvas(this.context) 108 .width('100%') 109 .height('100%') 110 .backgroundColor('#ffff00') 111 .onReady(() =>{ 112 let offContext = this.offCanvas.getContext("2d", this.settings) 113 offContext.fillStyle = '#0000ff' 114 offContext.fillRect(20, 20, 150, 100) 115 let image = this.offCanvas.transferToImageBitmap() 116 this.context.transferFromImageBitmap(image) 117 }) 118 } 119 .width('100%') 120 .height('100%') 121 } 122} 123``` 124 125 126 127```ts 128// xxx.ets 129@Entry 130@Component 131struct FillStyleExample { 132 private settings: RenderingContextSettings = new RenderingContextSettings(true); 133 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 134 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 135 136 build() { 137 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 138 Canvas(this.context) 139 .width('100%') 140 .height('100%') 141 .backgroundColor('#ffff00') 142 .onReady(() =>{ 143 let offContext = this.offCanvas.getContext("2d", this.settings) 144 offContext.fillStyle = 0x0000FF 145 offContext.fillRect(20, 20, 150, 100) 146 let image = this.offCanvas.transferToImageBitmap() 147 this.context.transferFromImageBitmap(image) 148 }) 149 } 150 .width('100%') 151 .height('100%') 152 } 153} 154``` 155 156 157 158 159### lineWidth 160 161```ts 162// xxx.ets 163@Entry 164@Component 165struct LineWidthExample { 166 private settings: RenderingContextSettings = new RenderingContextSettings(true); 167 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 168 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 169 170 build() { 171 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 172 Canvas(this.context) 173 .width('100%') 174 .height('100%') 175 .backgroundColor('#ffff00') 176 .onReady(() =>{ 177 let offContext = this.offCanvas.getContext("2d", this.settings) 178 offContext.lineWidth = 5 179 offContext.strokeRect(25, 25, 85, 105) 180 let image = this.offCanvas.transferToImageBitmap() 181 this.context.transferFromImageBitmap(image) 182 }) 183 } 184 .width('100%') 185 .height('100%') 186 } 187} 188``` 189 190 191 192 193### strokeStyle 194 195```ts 196// xxx.ets 197@Entry 198@Component 199struct StrokeStyleExample { 200 private settings: RenderingContextSettings = new RenderingContextSettings(true); 201 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 202 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 203 204 build() { 205 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 206 Canvas(this.context) 207 .width('100%') 208 .height('100%') 209 .backgroundColor('#ffff00') 210 .onReady(() =>{ 211 let offContext = this.offCanvas.getContext("2d", this.settings) 212 offContext.lineWidth = 10 213 offContext.strokeStyle = '#0000ff' 214 offContext.strokeRect(25, 25, 155, 105) 215 let image = this.offCanvas.transferToImageBitmap() 216 this.context.transferFromImageBitmap(image) 217 }) 218 } 219 .width('100%') 220 .height('100%') 221 } 222} 223``` 224 225 226 227```ts 228// xxx.ets 229@Entry 230@Component 231struct StrokeStyleExample { 232 private settings: RenderingContextSettings = new RenderingContextSettings(true); 233 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 234 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 235 236 build() { 237 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 238 Canvas(this.context) 239 .width('100%') 240 .height('100%') 241 .backgroundColor('#ffff00') 242 .onReady(() =>{ 243 let offContext = this.offCanvas.getContext("2d", this.settings) 244 offContext.lineWidth = 10 245 offContext.strokeStyle = 0x0000ff 246 offContext.strokeRect(25, 25, 155, 105) 247 let image = this.offCanvas.transferToImageBitmap() 248 this.context.transferFromImageBitmap(image) 249 }) 250 } 251 .width('100%') 252 .height('100%') 253 } 254} 255``` 256 257 258 259 260### lineCap 261 262```ts 263// xxx.ets 264@Entry 265@Component 266struct LineCapExample { 267 private settings: RenderingContextSettings = new RenderingContextSettings(true); 268 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 269 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 270 271 build() { 272 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 273 Canvas(this.context) 274 .width('100%') 275 .height('100%') 276 .backgroundColor('#ffff00') 277 .onReady(() =>{ 278 let offContext = this.offCanvas.getContext("2d", this.settings) 279 offContext.lineWidth = 8 280 offContext.beginPath() 281 offContext.lineCap = 'round' 282 offContext.moveTo(30, 50) 283 offContext.lineTo(220, 50) 284 offContext.stroke() 285 let image = this.offCanvas.transferToImageBitmap() 286 this.context.transferFromImageBitmap(image) 287 }) 288 } 289 .width('100%') 290 .height('100%') 291 } 292} 293``` 294 295 296 297 298### lineJoin 299 300```ts 301// xxx.ets 302@Entry 303@Component 304struct LineJoinExample { 305 private settings: RenderingContextSettings = new RenderingContextSettings(true); 306 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 307 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 308 309 build() { 310 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 311 Canvas(this.context) 312 .width('100%') 313 .height('100%') 314 .backgroundColor('#ffff00') 315 .onReady(() =>{ 316 let offContext = this.offCanvas.getContext("2d", this.settings) 317 offContext.beginPath() 318 offContext.lineWidth = 8 319 offContext.lineJoin = 'miter' 320 offContext.moveTo(30, 30) 321 offContext.lineTo(120, 60) 322 offContext.lineTo(30, 110) 323 offContext.stroke() 324 let image = this.offCanvas.transferToImageBitmap() 325 this.context.transferFromImageBitmap(image) 326 }) 327 } 328 .width('100%') 329 .height('100%') 330 } 331} 332``` 333 334 335 336 337### miterLimit 338 339```ts 340// xxx.ets 341@Entry 342@Component 343struct MiterLimit { 344 private settings: RenderingContextSettings = new RenderingContextSettings(true); 345 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 346 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 347 348 build() { 349 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 350 Canvas(this.context) 351 .width('100%') 352 .height('100%') 353 .backgroundColor('#ffff00') 354 .onReady(() =>{ 355 let offContext = this.offCanvas.getContext("2d", this.settings) 356 offContext.lineWidth = 8 357 offContext.lineJoin = 'miter' 358 offContext.miterLimit = 3 359 offContext.moveTo(30, 30) 360 offContext.lineTo(60, 35) 361 offContext.lineTo(30, 37) 362 offContext.stroke() 363 let image = this.offCanvas.transferToImageBitmap() 364 this.context.transferFromImageBitmap(image) 365 }) 366 } 367 .width('100%') 368 .height('100%') 369 } 370} 371``` 372 373 374 375 376### font 377 378```ts 379import { text } from '@kit.ArkGraphics2D'; 380 381@Entry 382@Component 383struct FontDemo { 384 private settings: RenderingContextSettings = new RenderingContextSettings(true); 385 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 386 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 387 388 build() { 389 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 390 Canvas(this.context) 391 .width('100%') 392 .height('100%') 393 .backgroundColor('rgb(213,213,213)') 394 .onReady(() => { 395 let offContext = this.offCanvas.getContext("2d", this.settings); 396 // 常规字体样式，常规粗细，字体大小为30px，字体系列为sans-serif 397 offContext.font = 'normal normal 30px sans-serif' 398 offContext.fillText("Hello px", 20, 60) 399 // 斜体样式，加粗，字体大小为30vp，字体系列为monospace 400 offContext.font = 'italic bold 30vp monospace' 401 offContext.fillText("Hello vp", 20, 100) 402 // 加载rawfile目录下的自定义字体文件HarmonyOS_Sans_Thin_Italic.ttf 403 let fontCollection = text.FontCollection.getGlobalInstance(); 404 fontCollection.loadFontSync('HarmonyOS_Sans_Thin_Italic', $rawfile("HarmonyOS_Sans_Thin_Italic.ttf")) 405 // 加粗，字体大小为30vp，字体系列为HarmonyOS_Sans_Thin_Italic 406 offContext.font = "bold 30vp HarmonyOS_Sans_Thin_Italic" 407 offContext.fillText("Hello customFont", 20, 140) 408 let image = this.offCanvas.transferToImageBitmap(); 409 this.context.transferFromImageBitmap(image) 410 }) 411 } 412 .width('100%') 413 .height('100%') 414 } 415} 416``` 417 418 419 420### textAlign 421 422```ts 423// xxx.ets 424@Entry 425@Component 426struct CanvasExample { 427 private settings: RenderingContextSettings = new RenderingContextSettings(true); 428 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 429 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 430 431 build() { 432 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 433 Canvas(this.context) 434 .width('100%') 435 .height('100%') 436 .backgroundColor('#ffff00') 437 .onReady(() =>{ 438 let offContext = this.offCanvas.getContext("2d", this.settings) 439 offContext.strokeStyle = '#0000ff' 440 offContext.moveTo(140, 10) 441 offContext.lineTo(140, 160) 442 offContext.stroke() 443 444 offContext.font = '18px sans-serif' 445 446 offContext.textAlign = 'start' 447 offContext.fillText('textAlign=start', 140, 60) 448 offContext.textAlign = 'end' 449 offContext.fillText('textAlign=end', 140, 80) 450 offContext.textAlign = 'left' 451 offContext.fillText('textAlign=left', 140, 100) 452 offContext.textAlign = 'center' 453 offContext.fillText('textAlign=center',140, 120) 454 offContext.textAlign = 'right' 455 offContext.fillText('textAlign=right',140, 140) 456 let image = this.offCanvas.transferToImageBitmap() 457 this.context.transferFromImageBitmap(image) 458 }) 459 } 460 .width('100%') 461 .height('100%') 462 } 463} 464``` 465 466 467 468 469### textBaseline 470 471```ts 472// xxx.ets 473@Entry 474@Component 475struct TextBaseline { 476 private settings: RenderingContextSettings = new RenderingContextSettings(true); 477 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 478 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 479 480 build() { 481 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 482 Canvas(this.context) 483 .width('100%') 484 .height('100%') 485 .backgroundColor('rgb(213,213,213)') 486 .onReady(() => { 487 let offContext = this.offCanvas.getContext("2d", this.settings) 488 offContext.strokeStyle = '#0000ff' 489 offContext.moveTo(0, 120) 490 offContext.lineTo(400, 120) 491 offContext.stroke() 492 493 offContext.font = '20px sans-serif' 494 495 offContext.textBaseline = 'top' 496 offContext.fillText('Top', 10, 120) 497 offContext.textBaseline = 'bottom' 498 offContext.fillText('Bottom', 55, 120) 499 offContext.textBaseline = 'middle' 500 offContext.fillText('Middle', 125, 120) 501 offContext.textBaseline = 'alphabetic' 502 offContext.fillText('Alphabetic', 195, 120) 503 offContext.textBaseline = 'hanging' 504 offContext.fillText('Hanging', 295, 120) 505 let image = this.offCanvas.transferToImageBitmap() 506 this.context.transferFromImageBitmap(image) 507 }) 508 } 509 .width('100%') 510 .height('100%') 511 } 512} 513``` 514 515 516 517 518### globalAlpha 519 520```ts 521// xxx.ets 522@Entry 523@Component 524struct GlobalAlpha { 525 private settings: RenderingContextSettings = new RenderingContextSettings(true); 526 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 527 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 528 529 build() { 530 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 531 Canvas(this.context) 532 .width('100%') 533 .height('100%') 534 .backgroundColor('#ffff00') 535 .onReady(() =>{ 536 let offContext = this.offCanvas.getContext("2d", this.settings) 537 offContext.fillStyle = 'rgb(0,0,255)' 538 offContext.fillRect(0, 0, 50, 50) 539 offContext.globalAlpha = 0.4 540 offContext.fillStyle = 'rgb(0,0,255)' 541 offContext.fillRect(50, 50, 50, 50) 542 let image = this.offCanvas.transferToImageBitmap() 543 this.context.transferFromImageBitmap(image) 544 }) 545 } 546 .width('100%') 547 .height('100%') 548 } 549} 550``` 551 552 553 554 555### lineDashOffset 556 557```ts 558// xxx.ets 559@Entry 560@Component 561struct LineDashOffset { 562 private settings: RenderingContextSettings = new RenderingContextSettings(true); 563 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 564 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 565 566 build() { 567 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 568 Canvas(this.context) 569 .width('100%') 570 .height('100%') 571 .backgroundColor('#ffff00') 572 .onReady(() =>{ 573 let offContext = this.offCanvas.getContext("2d", this.settings) 574 offContext.arc(100, 75, 50, 0, 6.28) 575 offContext.setLineDash([10,20]) 576 offContext.lineDashOffset = 10.0 577 offContext.stroke() 578 let image = this.offCanvas.transferToImageBitmap() 579 this.context.transferFromImageBitmap(image) 580 }) 581 } 582 .width('100%') 583 .height('100%') 584 } 585} 586 587``` 588 589 590 591### globalCompositeOperation 592 593| 名称 | 描述 | 594| ---------------- | ------------------------ | 595| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | 596| source-atop | 在现有绘制内容顶部显示新绘制内容。 | 597| source-in | 在现有绘制内容中显示新绘制内容。 | 598| source-out | 在现有绘制内容之外显示新绘制内容。 | 599| destination-over | 在新绘制内容上方显示现有绘制内容。 | 600| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | 601| destination-in | 在新绘制内容中显示现有绘制内容。 | 602| destination-out | 在新绘制内容外显示现有绘制内容。 | 603| lighter | 显示新绘制内容和现有绘制内容。 | 604| copy | 显示新绘制内容而忽略现有绘制内容。 | 605| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | 606 607```ts 608// xxx.ets 609@Entry 610@Component 611struct GlobalCompositeOperation { 612 private settings: RenderingContextSettings = new RenderingContextSettings(true); 613 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 614 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 615 616 build() { 617 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 618 Canvas(this.context) 619 .width('100%') 620 .height('100%') 621 .backgroundColor('#ffff00') 622 .onReady(() =>{ 623 let offContext = this.offCanvas.getContext("2d", this.settings) 624 offContext.fillStyle = 'rgb(255,0,0)' 625 offContext.fillRect(20, 20, 50, 50) 626 offContext.globalCompositeOperation = 'source-over' 627 offContext.fillStyle = 'rgb(0,0,255)' 628 offContext.fillRect(50, 50, 50, 50) 629 offContext.fillStyle = 'rgb(255,0,0)' 630 offContext.fillRect(120, 20, 50, 50) 631 offContext.globalCompositeOperation = 'destination-over' 632 offContext.fillStyle = 'rgb(0,0,255)' 633 offContext.fillRect(150, 50, 50, 50) 634 let image = this.offCanvas.transferToImageBitmap() 635 this.context.transferFromImageBitmap(image) 636 }) 637 } 638 .width('100%') 639 .height('100%') 640 } 641} 642``` 643 644 645 646 647### shadowBlur 648 649```ts 650// xxx.ets 651@Entry 652@Component 653struct ShadowBlur { 654 private settings: RenderingContextSettings = new RenderingContextSettings(true); 655 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 656 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 657 658 build() { 659 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 660 Canvas(this.context) 661 .width('100%') 662 .height('100%') 663 .backgroundColor('rgb(213,213,213)') 664 .onReady(() =>{ 665 let offContext = this.offCanvas.getContext("2d", this.settings) 666 offContext.shadowBlur = 30 667 offContext.shadowColor = 'rgb(0,0,0)' 668 offContext.fillStyle = 'rgb(39,135,217)' 669 offContext.fillRect(20, 20, 100, 80) 670 let image = this.offCanvas.transferToImageBitmap() 671 this.context.transferFromImageBitmap(image) 672 }) 673 } 674 .width('100%') 675 .height('100%') 676 } 677} 678``` 679 680 681 682 683### shadowColor 684 685```ts 686// xxx.ets 687@Entry 688@Component 689struct ShadowColor { 690 private settings: RenderingContextSettings = new RenderingContextSettings(true); 691 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 692 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 693 694 build() { 695 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 696 Canvas(this.context) 697 .width('100%') 698 .height('100%') 699 .backgroundColor('rgb(213,213,213)') 700 .onReady(() => { 701 let offContext = this.offCanvas.getContext("2d", this.settings) 702 offContext.shadowBlur = 30 703 offContext.shadowColor = 'rgb(255,192,0)' 704 offContext.fillStyle = 'rgb(39,135,217)' 705 offContext.fillRect(30, 30, 100, 100) 706 let image = this.offCanvas.transferToImageBitmap() 707 this.context.transferFromImageBitmap(image) 708 }) 709 } 710 .width('100%') 711 .height('100%') 712 } 713} 714``` 715 716 717 718 719### shadowOffsetX 720 721```ts 722// xxx.ets 723@Entry 724@Component 725struct ShadowOffsetX { 726 private settings: RenderingContextSettings = new RenderingContextSettings(true); 727 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 728 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 729 730 build() { 731 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 732 Canvas(this.context) 733 .width('100%') 734 .height('100%') 735 .backgroundColor('#ffff00') 736 .onReady(() =>{ 737 let offContext = this.offCanvas.getContext("2d", this.settings) 738 offContext.shadowBlur = 10 739 offContext.shadowOffsetX = 20 740 offContext.shadowColor = 'rgb(0,0,0)' 741 offContext.fillStyle = 'rgb(255,0,0)' 742 offContext.fillRect(20, 20, 100, 80) 743 let image = this.offCanvas.transferToImageBitmap() 744 this.context.transferFromImageBitmap(image) 745 }) 746 } 747 .width('100%') 748 .height('100%') 749 } 750} 751``` 752 753 754 755 756### shadowOffsetY 757 758```ts 759// xxx.ets 760@Entry 761@Component 762struct ShadowOffsetY { 763 private settings: RenderingContextSettings = new RenderingContextSettings(true); 764 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 765 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 766 767 build() { 768 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 769 Canvas(this.context) 770 .width('100%') 771 .height('100%') 772 .backgroundColor('#ffff00') 773 .onReady(() =>{ 774 let offContext = this.offCanvas.getContext("2d", this.settings) 775 offContext.shadowBlur = 10 776 offContext.shadowOffsetY = 20 777 offContext.shadowColor = 'rgb(0,0,0)' 778 offContext.fillStyle = 'rgb(255,0,0)' 779 offContext.fillRect(30, 30, 100, 100) 780 let image = this.offCanvas.transferToImageBitmap() 781 this.context.transferFromImageBitmap(image) 782 }) 783 } 784 .width('100%') 785 .height('100%') 786 } 787} 788``` 789 790 791 792 793### imageSmoothingEnabled 794 795```ts 796// xxx.ets 797@Entry 798@Component 799struct ImageSmoothingEnabled { 800 private settings: RenderingContextSettings = new RenderingContextSettings(true); 801 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 802 // "common/images/icon.jpg"需要替换为开发者所需的图像资源文件 803 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); 804 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 805 806 build() { 807 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 808 Canvas(this.context) 809 .width('100%') 810 .height('100%') 811 .backgroundColor('#ffff00') 812 .onReady(() =>{ 813 let offContext = this.offCanvas.getContext("2d", this.settings) 814 offContext.imageSmoothingEnabled = false 815 offContext.drawImage(this.img,0,0,400,200) 816 let image = this.offCanvas.transferToImageBitmap() 817 this.context.transferFromImageBitmap(image) 818 }) 819 } 820 .width('100%') 821 .height('100%') 822 } 823} 824``` 825 826 827 828 829### imageSmoothingQuality 830 831```ts 832 // xxx.ets 833 @Entry 834 @Component 835 struct ImageSmoothingQualityDemoOff { 836 private settings: RenderingContextSettings = new RenderingContextSettings(true); 837 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this. 838settings); 839 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 840 // "common/images/example.jpg"需要替换为开发者所需的图像资源文件 841 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); 842 843 build() { 844 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, 845justifyContent: FlexAlign.Center }) { 846 Canvas(this.context) 847 .width('100%') 848 .height('100%') 849 .backgroundColor('#ffff00') 850 .onReady(() =>{ 851 let offContext = this.offCanvas.getContext("2d", this.settings) 852 let offctx = offContext 853 offctx.imageSmoothingEnabled = true 854 offctx.imageSmoothingQuality = 'high' 855 offctx.drawImage(this.img, 0, 0, 400, 200) 856 857 let image = this.offCanvas.transferToImageBitmap() 858 this.context.transferFromImageBitmap(image) 859 }) 860 } 861 .width('100%') 862 .height('100%') 863 } 864 } 865``` 866 867 868 869### direction 870 871```ts 872 // xxx.ets 873 @Entry 874 @Component 875 struct DirectionDemoOff { 876 private settings: RenderingContextSettings = new RenderingContextSettings(true); 877 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this. 878settings); 879 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 880 881 build() { 882 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, 883justifyContent: FlexAlign.Center }) { 884 Canvas(this.context) 885 .width('100%') 886 .height('100%') 887 .backgroundColor('#ffff00') 888 .onReady(() =>{ 889 let offContext = this.offCanvas.getContext("2d", this.settings) 890 let offctx = offContext 891 offctx.font = '48px serif'; 892 offctx.textAlign = 'start' 893 offctx.fillText("Hi ltr!", 200, 50); 894 895 offctx.direction = "rtl"; 896 offctx.fillText("Hi rtl!", 200, 100); 897 898 let image = offctx.transferToImageBitmap() 899 this.context.transferFromImageBitmap(image) 900 }) 901 } 902 .width('100%') 903 .height('100%') 904 } 905 } 906``` 907 908 909 910### filter 911 912```ts 913 // xxx.ets 914 @Entry 915 @Component 916 struct FilterDemoOff { 917 private settings: RenderingContextSettings = new RenderingContextSettings(true); 918 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 919 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 920 // "common/images/example.jpg"需要替换为开发者所需的图像资源文件 921 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg"); 922 923 build() { 924 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 925 Canvas(this.context) 926 .width('100%') 927 .height('100%') 928 .onReady(() => { 929 let offContext = this.offCanvas.getContext("2d", this.settings) 930 let img = this.img 931 932 offContext.drawImage(img, 0, 0, 100, 100); 933 934 offContext.filter = 'grayscale(50%)'; 935 offContext.drawImage(img, 100, 0, 100, 100); 936 937 offContext.filter = 'sepia(60%)'; 938 offContext.drawImage(img, 200, 0, 100, 100); 939 940 offContext.filter = 'saturate(30%)'; 941 offContext.drawImage(img, 0, 100, 100, 100); 942 943 offContext.filter = 'hue-rotate(90deg)'; 944 offContext.drawImage(img, 100, 100, 100, 100); 945 946 offContext.filter = 'invert(100%)'; 947 offContext.drawImage(img, 200, 100, 100, 100); 948 949 offContext.filter = 'opacity(25%)'; 950 offContext.drawImage(img, 0, 200, 100, 100); 951 952 offContext.filter = 'brightness(0.4)'; 953 offContext.drawImage(img, 100, 200, 100, 100); 954 955 offContext.filter = 'contrast(200%)'; 956 offContext.drawImage(img, 200, 200, 100, 100); 957 958 offContext.filter = 'blur(5px)'; 959 offContext.drawImage(img, 0, 300, 100, 100); 960 961 // Applying multiple filters 962 offContext.filter = 'opacity(50%) contrast(200%) grayscale(50%)'; 963 offContext.drawImage(img, 100, 300, 100, 100); 964 965 let image = this.offCanvas.transferToImageBitmap() 966 this.context.transferFromImageBitmap(image) 967 }) 968 } 969 .width('100%') 970 .height('100%') 971 } 972 } 973``` 974 975 976 977### letterSpacing<sup>18+</sup> 978 979```ts 980 // xxx.ets 981 import { LengthMetrics, LengthUnit } from '@kit.ArkUI'; 982 983 @Entry 984 @Component 985 struct letterSpacingDemo { 986 private settings: RenderingContextSettings = new RenderingContextSettings(true); 987 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 988 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 989 990 build() { 991 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 992 Canvas(this.context) 993 .width('100%') 994 .height('100%') 995 .backgroundColor('rgb(213,213,213)') 996 .onReady(() => { 997 let offContext = this.offCanvas.getContext("2d", this.settings) 998 offContext.font = '30vp' 999 offContext.letterSpacing = '10vp' 1000 offContext.fillText('hello world', 30, 50) 1001 offContext.letterSpacing = new LengthMetrics(10, LengthUnit.VP) 1002 offContext.fillText('hello world', 30, 100) 1003 let image = this.offCanvas.transferToImageBitmap() 1004 this.context.transferFromImageBitmap(image) 1005 }) 1006 } 1007 .width('100%') 1008 .height('100%') 1009 } 1010 } 1011``` 1012 1013 1014 1015## 方法 1016 1017 1018### fillRect 1019 1020fillRect(x: number, y: number, w: number, h: number): void 1021 1022填充一个矩形。 1023 1024**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1025 1026**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1027 1028**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1029 1030 **参数：** 1031 1032| 参数名 | 类型 | 必填 | 说明 | 1033| ------ | ------ | ---- | ------------- | 1034| x | number | 是 | 指定矩形左上角点的x坐标。<br>默认单位：vp | 1035| y | number | 是 | 指定矩形左上角点的y坐标。<br>默认单位：vp | 1036| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp | 1037| h | number | 是 | 指定矩形的高度。<br>默认单位：vp | 1038 1039 **示例：** 1040 1041 ```ts 1042 // xxx.ets 1043 @Entry 1044 @Component 1045 struct FillRect { 1046 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1047 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1048 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1049 1050 build() { 1051 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1052 Canvas(this.context) 1053 .width('100%') 1054 .height('100%') 1055 .backgroundColor('rgb(213,213,213)') 1056 .onReady(() =>{ 1057 let offContext = this.offCanvas.getContext("2d", this.settings) 1058 offContext.fillRect(30,30,100,100) 1059 let image = this.offCanvas.transferToImageBitmap() 1060 this.context.transferFromImageBitmap(image) 1061 }) 1062 } 1063 .width('100%') 1064 .height('100%') 1065 } 1066 } 1067 ``` 1068 1069  1070 1071 1072### strokeRect 1073 1074strokeRect(x: number, y: number, w: number, h: number): void 1075 1076绘制具有边框的矩形，矩形内部不填充。 1077 1078**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1079 1080**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1081 1082**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1083 1084 **参数：** 1085 1086| 参数名 | 类型 | 必填 | 说明 | 1087| ------ | ------ | ---- | ------------ | 1088| x | number | 是 | 指定矩形的左上角x坐标。<br>默认单位：vp | 1089| y | number | 是 | 指定矩形的左上角y坐标。<br>默认单位：vp | 1090| width | number | 是 | 指定矩形的宽度。<br>默认单位：vp | 1091| height | number | 是 | 指定矩形的高度。<br>默认单位：vp | 1092 1093 **示例：** 1094 1095 ```ts 1096 // xxx.ets 1097 @Entry 1098 @Component 1099 struct StrokeRect { 1100 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1101 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1102 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1103 1104 build() { 1105 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1106 Canvas(this.context) 1107 .width('100%') 1108 .height('100%') 1109 .backgroundColor('#ffff00') 1110 .onReady(() =>{ 1111 let offContext = this.offCanvas.getContext("2d", this.settings) 1112 offContext.strokeRect(30, 30, 200, 150) 1113 let image = this.offCanvas.transferToImageBitmap() 1114 this.context.transferFromImageBitmap(image) 1115 }) 1116 } 1117 .width('100%') 1118 .height('100%') 1119 } 1120 } 1121 ``` 1122 1123  1124 1125 1126### clearRect 1127 1128clearRect(x: number, y: number, w: number, h: number): void 1129 1130删除指定区域内的绘制内容。 1131 1132**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1133 1134**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1135 1136**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1137 1138 **参数：** 1139 1140| 参数名 | 类型 | 必填 | 说明 | 1141| ------ | ------ | ---- | ------------- | 1142| x | number | 是 | 指定矩形上的左上角x坐标。<br>默认单位：vp | 1143| y | number | 是 | 指定矩形上的左上角y坐标。<br>默认单位：vp | 1144| width | number | 是 | 指定矩形的宽度。<br>默认单位：vp | 1145| height | number | 是 | 指定矩形的高度。<br>默认单位：vp | 1146 1147 **示例：** 1148 1149 ```ts 1150 // xxx.ets 1151 @Entry 1152 @Component 1153 struct ClearRect { 1154 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1155 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1156 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1157 1158 build() { 1159 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1160 Canvas(this.context) 1161 .width('100%') 1162 .height('100%') 1163 .backgroundColor('#ffff00') 1164 .onReady(() =>{ 1165 let offContext = this.offCanvas.getContext("2d", this.settings) 1166 offContext.fillStyle = 'rgb(0,0,255)' 1167 offContext.fillRect(20,20,200,200) 1168 offContext.clearRect(30,30,150,100) 1169 let image = this.offCanvas.transferToImageBitmap() 1170 this.context.transferFromImageBitmap(image) 1171 }) 1172 } 1173 .width('100%') 1174 .height('100%') 1175 } 1176 } 1177 ``` 1178 1179  1180 1181 1182### fillText 1183 1184fillText(text: string, x: number, y: number, maxWidth?: number): void 1185 1186绘制填充类文本。 1187 1188**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1189 1190**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1191 1192**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1193 1194**参数：** 1195 1196| 参数名 | 类型 | 必填 | 说明 | 1197| -------- | ------ | ---- | --------------- | 1198| text | string | 是 | 需要绘制的文本内容。 | 1199| x | number | 是 | 文本绘制起点的x轴坐标。默认单位：vp | 1200| y | number | 是 | 文本绘制起点的y轴坐标。默认单位：vp | 1201| maxWidth | number | 否 | 指定文本允许的最大宽度。<br>默认单位：vp<br>默认值：不限制宽度。 | 1202 1203 **示例：** 1204 1205 ```ts 1206 // xxx.ets 1207 @Entry 1208 @Component 1209 struct FillText { 1210 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1211 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1212 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1213 1214 build() { 1215 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1216 Canvas(this.context) 1217 .width('100%') 1218 .height('100%') 1219 .backgroundColor('#ffff00') 1220 .onReady(() =>{ 1221 let offContext = this.offCanvas.getContext("2d", this.settings) 1222 offContext.font = '30px sans-serif' 1223 offContext.fillText("Hello World!", 20, 100) 1224 let image = this.offCanvas.transferToImageBitmap() 1225 this.context.transferFromImageBitmap(image) 1226 }) 1227 } 1228 .width('100%') 1229 .height('100%') 1230 } 1231 } 1232 ``` 1233 1234  1235 1236 1237### strokeText 1238 1239strokeText(text: string, x: number, y: number, maxWidth?: number): void 1240 1241绘制描边类文本。 1242 1243**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1244 1245**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1246 1247**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1248 1249**参数：** 1250 1251| 参数名 | 类型 | 必填 | 说明 | 1252| -------- | ------ | ---- | --------------- | 1253| text | string | 是 | 需要绘制的文本内容。 | 1254| x | number | 是 | 文本绘制起点的x轴坐标。默认单位：vp | 1255| y | number | 是 | 文本绘制起点的y轴坐标。默认单位：vp | 1256| maxWidth | number | 否 | 需要绘制的文本的最大宽度。<br>默认单位：vp<br>默认值：不限制宽度。 | 1257 1258 **示例：** 1259 1260 ```ts 1261 // xxx.ets 1262 @Entry 1263 @Component 1264 struct StrokeText { 1265 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1266 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1267 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1268 1269 build() { 1270 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1271 Canvas(this.context) 1272 .width('100%') 1273 .height('100%') 1274 .backgroundColor('#ffff00') 1275 .onReady(() =>{ 1276 let offContext = this.offCanvas.getContext("2d", this.settings) 1277 offContext.font = '55px sans-serif' 1278 offContext.strokeText("Hello World!", 20, 60) 1279 let image = this.offCanvas.transferToImageBitmap() 1280 this.context.transferFromImageBitmap(image) 1281 }) 1282 } 1283 .width('100%') 1284 .height('100%') 1285 } 1286 } 1287 ``` 1288 1289  1290 1291 1292### measureText 1293 1294measureText(text: string): TextMetrics 1295 1296该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 1297 1298**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1299 1300**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1301 1302**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1303 1304 **参数：** 1305 1306| 参数名 | 类型 | 必填 | 说明 | 1307| ---- | ------ | ---- | ---------- | 1308| text | string | 是 | 需要进行测量的文本。 | 1309 1310 **返回值：** 1311 1312| 类型 | 说明 | 1313| ----------- | ---------------------------------------- | 1314| [TextMetrics](ts-canvasrenderingcontext2d.md#textmetrics) | 文本的尺寸信息。 | 1315 1316 **示例：** 1317 1318 ```ts 1319 // xxx.ets 1320 @Entry 1321 @Component 1322 struct MeasureText { 1323 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1324 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1325 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1326 1327 build() { 1328 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1329 Canvas(this.context) 1330 .width('100%') 1331 .height('100%') 1332 .backgroundColor('rgb(213,213,213)') 1333 .onReady(() => { 1334 let offContext = this.offCanvas.getContext("2d", this.settings) 1335 offContext.font = '50px sans-serif' 1336 offContext.fillText("Hello World!", 20, 100) 1337 offContext.fillText("width:" + offContext.measureText("Hello World!").width, 20, 200) 1338 let image = this.offCanvas.transferToImageBitmap() 1339 this.context.transferFromImageBitmap(image) 1340 }) 1341 } 1342 .width('100%') 1343 .height('100%') 1344 } 1345 } 1346 ``` 1347 1348  1349 1350 1351### stroke 1352 1353stroke(): void 1354 1355根据当前的路径，进行边框绘制操作。 1356 1357**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1358 1359**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1360 1361**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1362 1363**示例：** 1364 1365 ```ts 1366 // xxx.ets 1367 @Entry 1368 @Component 1369 struct Stroke { 1370 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1371 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1372 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1373 1374 build() { 1375 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1376 Canvas(this.context) 1377 .width('100%') 1378 .height('100%') 1379 .backgroundColor('#ffff00') 1380 .onReady(() => { 1381 let offContext = this.offCanvas.getContext("2d", this.settings) 1382 offContext.moveTo(125, 25) 1383 offContext.lineTo(125, 105) 1384 offContext.lineTo(175, 105) 1385 offContext.lineTo(175, 25) 1386 offContext.strokeStyle = 'rgb(255,0,0)' 1387 offContext.stroke() 1388 let image = this.offCanvas.transferToImageBitmap() 1389 this.context.transferFromImageBitmap(image) 1390 }) 1391 } 1392 .width('100%') 1393 .height('100%') 1394 } 1395 } 1396 ``` 1397 1398  1399 1400### stroke 1401 1402stroke(path: Path2D): void 1403 1404根据指定的路径，进行边框绘制操作。 1405 1406**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1407 1408**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1409 1410**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1411 1412 **参数：** 1413 1414| 参数名 | 类型 | 必填 | 说明 | 1415| ---- | ---------------------------------------- | ---- | ------------ | 1416| path | [Path2D](ts-components-canvas-path2d.md) | 是 | 需要绘制的Path2D。 | 1417 1418 **示例：** 1419 1420 ```ts 1421 // xxx.ets 1422 @Entry 1423 @Component 1424 struct Stroke { 1425 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1426 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1427 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1428 private path2Da: Path2D = new Path2D(); 1429 1430 build() { 1431 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1432 Canvas(this.context) 1433 .width('100%') 1434 .height('100%') 1435 .backgroundColor('#ffff00') 1436 .onReady(() => { 1437 let offContext = this.offCanvas.getContext("2d", this.settings) 1438 this.path2Da.moveTo(25, 25) 1439 this.path2Da.lineTo(25, 105) 1440 this.path2Da.lineTo(75, 105) 1441 this.path2Da.lineTo(75, 25) 1442 offContext.strokeStyle = 'rgb(0,0,255)' 1443 offContext.stroke(this.path2Da) 1444 let image = this.offCanvas.transferToImageBitmap() 1445 this.context.transferFromImageBitmap(image) 1446 }) 1447 } 1448 .width('100%') 1449 .height('100%') 1450 } 1451 } 1452 ``` 1453 1454  1455 1456 1457### beginPath 1458 1459beginPath(): void 1460 1461创建一个新的绘制路径。 1462 1463**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1464 1465**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1466 1467**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1468 1469 **示例：** 1470 1471 ```ts 1472 // xxx.ets 1473 @Entry 1474 @Component 1475 struct BeginPath { 1476 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1477 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1478 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1479 1480 build() { 1481 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1482 Canvas(this.context) 1483 .width('100%') 1484 .height('100%') 1485 .backgroundColor('rgb(213,213,213)') 1486 .onReady(() => { 1487 let offContext = this.offCanvas.getContext("2d", this.settings) 1488 offContext.beginPath() 1489 offContext.lineWidth = 6 1490 offContext.strokeStyle = '#0000ff' 1491 offContext.moveTo(15, 80) 1492 offContext.lineTo(280, 160) 1493 offContext.stroke() 1494 let image = this.offCanvas.transferToImageBitmap() 1495 this.context.transferFromImageBitmap(image) 1496 }) 1497 } 1498 .width('100%') 1499 .height('100%') 1500 } 1501 } 1502 ``` 1503 1504  1505 1506 1507### moveTo 1508 1509moveTo(x: number, y: number): void 1510 1511路径从当前点移动到指定点。 1512 1513**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1514 1515**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1516 1517**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1518 1519 **参数：** 1520 1521| 参数名 | 类型 | 必填 | 说明 | 1522| ---- | ------ | ---- | --------- | 1523| x | number | 是 | 指定位置的x坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1524| y | number | 是 | 指定位置的y坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1525 1526> **说明：** 1527> 1528> API version 18之前，若未执行moveTo接口或moveTo接口传入无效参数，路径以(0,0)为起点。 1529> 1530> API version 18及以后，若未执行moveTo接口或moveTo接口传入无效参数，路径以初次调用的lineTo、arcTo、bezierCurveTo或quadraticCurveTo接口中的起始点为起点。 1531 1532 **示例：** 1533 1534 ```ts 1535 // xxx.ets 1536 @Entry 1537 @Component 1538 struct MoveTo { 1539 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1540 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1541 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1542 1543 build() { 1544 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1545 Canvas(this.context) 1546 .width('100%') 1547 .height('100%') 1548 .backgroundColor('#ffff00') 1549 .onReady(() =>{ 1550 let offContext = this.offCanvas.getContext("2d", this.settings) 1551 offContext.beginPath() 1552 offContext.moveTo(10, 10) 1553 offContext.lineTo(280, 160) 1554 offContext.stroke() 1555 let image = this.offCanvas.transferToImageBitmap() 1556 this.context.transferFromImageBitmap(image) 1557 }) 1558 } 1559 .width('100%') 1560 .height('100%') 1561 } 1562 } 1563 ``` 1564 1565  1566 1567 1568### lineTo 1569 1570lineTo(x: number, y: number): void 1571 1572从当前点到指定点进行路径连接。 1573 1574**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1575 1576**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1577 1578**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1579 1580 **参数：** 1581 1582| 参数名 | 类型 | 必填 | 描述 | 1583| ---- | ------ | ---- | --------- | 1584| x | number | 是 | 指定位置的x坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1585| y | number | 是 | 指定位置的y坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1586 1587 **示例：** 1588 1589 ```ts 1590 // xxx.ets 1591 @Entry 1592 @Component 1593 struct LineTo { 1594 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1595 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1596 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1597 1598 build() { 1599 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1600 Canvas(this.context) 1601 .width('100%') 1602 .height('100%') 1603 .backgroundColor('#ffff00') 1604 .onReady(() =>{ 1605 let offContext = this.offCanvas.getContext("2d", this.settings) 1606 offContext.beginPath() 1607 offContext.moveTo(10, 10) 1608 offContext.lineTo(280, 160) 1609 offContext.stroke() 1610 let image = this.offCanvas.transferToImageBitmap() 1611 this.context.transferFromImageBitmap(image) 1612 }) 1613 } 1614 .width('100%') 1615 .height('100%') 1616 } 1617 } 1618 ``` 1619 1620  1621 1622 1623### closePath 1624 1625closePath(): void 1626 1627结束当前路径形成一个封闭路径。 1628 1629**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1630 1631**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1632 1633**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1634 1635 **示例：** 1636 1637 ```ts 1638 // xxx.ets 1639 @Entry 1640 @Component 1641 struct ClosePath { 1642 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1643 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1644 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1645 1646 build() { 1647 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1648 Canvas(this.context) 1649 .width('100%') 1650 .height('100%') 1651 .backgroundColor('#ffff00') 1652 .onReady(() =>{ 1653 let offContext = this.offCanvas.getContext("2d", this.settings) 1654 offContext.beginPath() 1655 offContext.moveTo(30, 30) 1656 offContext.lineTo(110, 30) 1657 offContext.lineTo(70, 90) 1658 offContext.closePath() 1659 offContext.stroke() 1660 let image = this.offCanvas.transferToImageBitmap() 1661 this.context.transferFromImageBitmap(image) 1662 }) 1663 } 1664 .width('100%') 1665 .height('100%') 1666 } 1667 } 1668 ``` 1669 1670  1671 1672 1673### createPattern 1674 1675createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 1676 1677通过指定图像和重复方式创建图片填充的模板。 1678 1679**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1680 1681**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1682 1683**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1684 1685**参数：** 1686 1687| 参数名 | 类型 | 必填 | 说明 | 1688| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 1689| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象，具体参考ImageBitmap对象。 | 1690| repetition | string \| null | 是 | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'、'clamp'、'mirror'。 | 1691 1692**返回值：** 1693 1694| 类型 | 说明 | 1695| ---------------------------------------- | ----------------------- | 1696| [CanvasPattern](ts-components-canvas-canvaspattern.md) \| null | 通过指定图像和重复方式创建图片填充的模板对象。 | 1697 1698 **示例：** 1699 1700 ```ts 1701 // xxx.ets 1702 @Entry 1703 @Component 1704 struct CreatePattern { 1705 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1706 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1707 // "common/images/example.jpg"需要替换为开发者所需的图像资源文件 1708 private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); 1709 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1710 1711 build() { 1712 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1713 Canvas(this.context) 1714 .width('100%') 1715 .height('100%') 1716 .backgroundColor('rgb(213,213,213)') 1717 .onReady(() => { 1718 let offContext = this.offCanvas.getContext("2d", this.settings) 1719 let pattern = offContext.createPattern(this.img, 'repeat') 1720 offContext.fillStyle = pattern as CanvasPattern 1721 offContext.fillRect(0, 0, 200, 200) 1722 let image = this.offCanvas.transferToImageBitmap() 1723 this.context.transferFromImageBitmap(image) 1724 }) 1725 } 1726 .width('100%') 1727 .height('100%') 1728 } 1729 } 1730 ``` 1731 1732  1733 1734 1735### bezierCurveTo 1736 1737bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1738 1739创建三次贝塞尔曲线的路径。 1740 1741**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1742 1743**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1744 1745**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1746 1747 **参数：** 1748 1749| 参数名 | 类型 | 必填 | 说明 | 1750| ---- | ------ | ---- | -------------- | 1751| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1752| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1753| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1754| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1755| x | number | 是 | 路径结束时的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1756| y | number | 是 | 路径结束时的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1757 1758 **示例：** 1759 1760 ```ts 1761 // xxx.ets 1762 @Entry 1763 @Component 1764 struct BezierCurveTo { 1765 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1766 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1767 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1768 1769 build() { 1770 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1771 Canvas(this.context) 1772 .width('100%') 1773 .height('100%') 1774 .backgroundColor('#ffff00') 1775 .onReady(() =>{ 1776 let offContext = this.offCanvas.getContext("2d", this.settings) 1777 offContext.beginPath() 1778 offContext.moveTo(10, 10) 1779 offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) 1780 offContext.stroke() 1781 let image = this.offCanvas.transferToImageBitmap() 1782 this.context.transferFromImageBitmap(image) 1783 }) 1784 } 1785 .width('100%') 1786 .height('100%') 1787 } 1788 } 1789 ``` 1790 1791  1792 1793 1794### quadraticCurveTo 1795 1796quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1797 1798创建二次贝塞尔曲线的路径。 1799 1800**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1801 1802**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1803 1804**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1805 1806 **参数：** 1807 1808| 参数名 | 类型 | 必填 | 说明 | 1809| ---- | ------ | ---- | -------------- | 1810| cpx | number | 是 | 贝塞尔参数的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1811| cpy | number | 是 | 贝塞尔参数的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1812| x | number | 是 | 路径结束时的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1813| y | number | 是 | 路径结束时的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1814 1815 **示例：** 1816 1817 ```ts 1818 // xxx.ets 1819 @Entry 1820 @Component 1821 struct QuadraticCurveTo { 1822 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1823 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1824 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1825 1826 build() { 1827 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1828 Canvas(this.context) 1829 .width('100%') 1830 .height('100%') 1831 .backgroundColor('rgb(213,213,213)') 1832 .onReady(() => { 1833 let offContext = this.offCanvas.getContext("2d", this.settings) 1834 offContext.beginPath() 1835 offContext.moveTo(20, 20) 1836 offContext.quadraticCurveTo(100, 100, 200, 20) 1837 offContext.stroke() 1838 let image = this.offCanvas.transferToImageBitmap() 1839 this.context.transferFromImageBitmap(image) 1840 }) 1841 } 1842 .width('100%') 1843 .height('100%') 1844 } 1845 } 1846 ``` 1847 1848  1849 1850 1851### arc 1852 1853arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1854 1855绘制弧线路径。 1856 1857**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1858 1859**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1860 1861**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1862 1863 **参数：** 1864 1865| 参数名 | 类型 | 必填 | 说明 | 1866| ---------------- | ------- | ---- | ---------- | 1867| x | number | 是 | 弧线圆心的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1868| y | number | 是 | 弧线圆心的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1869| radius | number | 是 | 弧线的圆半径。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1870| startAngle | number | 是 | 弧线的起始弧度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：弧度 | 1871| endAngle | number | 是 | 弧线的终止弧度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：弧度 | 1872| counterclockwise | boolean | 否 | 是否逆时针绘制圆弧。<br/>true：逆时针绘制圆弧；false：顺时针绘制圆弧。<br>默认值：false，设置null或undefined按默认值处理。 | 1873 1874 **示例：** 1875 1876 ```ts 1877 // xxx.ets 1878 @Entry 1879 @Component 1880 struct Arc { 1881 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1882 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1883 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1884 1885 build() { 1886 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1887 Canvas(this.context) 1888 .width('100%') 1889 .height('100%') 1890 .backgroundColor('#ffff00') 1891 .onReady(() =>{ 1892 let offContext = this.offCanvas.getContext("2d", this.settings) 1893 offContext.beginPath() 1894 offContext.arc(100, 75, 50, 0, 6.28) 1895 offContext.stroke() 1896 let image = this.offCanvas.transferToImageBitmap() 1897 this.context.transferFromImageBitmap(image) 1898 }) 1899 } 1900 .width('100%') 1901 .height('100%') 1902 } 1903 } 1904 ``` 1905 1906  1907 1908 1909### arcTo 1910 1911arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1912 1913依据给定的控制点和圆弧半径创建圆弧路径。 1914 1915**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1916 1917**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1918 1919**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1920 1921 **参数：** 1922 1923| 参数名 | 类型 | 必填 | 说明 | 1924| ------ | ------ | ---- | --------------- | 1925| x1 | number | 是 | 第一个控制点的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1926| y1 | number | 是 | 第一个控制点的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1927| x2 | number | 是 | 第二个控制点的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1928| y2 | number | 是 | 第二个控制点的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1929| radius | number | 是 | 圆弧的圆半径值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 1930 1931 **示例：** 1932 1933 ```ts 1934 // xxx.ets 1935 @Entry 1936 @Component 1937 struct ArcTo { 1938 private settings: RenderingContextSettings = new RenderingContextSettings(true); 1939 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 1940 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 1941 1942 build() { 1943 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1944 Canvas(this.context) 1945 .width('100%') 1946 .height('100%') 1947 .backgroundColor('#ffff00') 1948 .onReady(() =>{ 1949 let offContext = this.offCanvas.getContext("2d", this.settings) 1950 1951 // 切线 1952 offContext.beginPath() 1953 offContext.strokeStyle = '#808080' 1954 offContext.lineWidth = 1.5; 1955 offContext.moveTo(360, 20); 1956 offContext.lineTo(360, 170); 1957 offContext.lineTo(110, 170); 1958 offContext.stroke(); 1959 1960 // 圆弧 1961 offContext.beginPath() 1962 offContext.strokeStyle = '#000000' 1963 offContext.lineWidth = 3; 1964 offContext.moveTo(360, 20) 1965 offContext.arcTo(360, 170, 110, 170, 150) 1966 offContext.stroke() 1967 1968 // 起始点 1969 offContext.beginPath(); 1970 offContext.fillStyle = '#00ff00'; 1971 offContext.arc(360, 20, 4, 0, 2 * Math.PI); 1972 offContext.fill(); 1973 1974 // 控制点 1975 offContext.beginPath(); 1976 offContext.fillStyle = '#ff0000'; 1977 offContext.arc(360, 170, 4, 0, 2 * Math.PI); 1978 offContext.arc(110, 170, 4, 0, 2 * Math.PI); 1979 offContext.fill(); 1980 1981 let image = this.offCanvas.transferToImageBitmap() 1982 this.context.transferFromImageBitmap(image) 1983 }) 1984 } 1985 .width('100%') 1986 .height('100%') 1987 } 1988 } 1989 ``` 1990 1991  1992 1993 > 此示例中，arcTo()创建的圆弧为黑色，圆弧的两条切线为灰色。控制点为红色，起始点为绿色。 1994 > 1995 > 可以想象两条切线：一条切线从起始点到第一个控制点，另一条切线从第一个控制点到第二个控制点。arcTo()在这两条切线间创建一个圆弧，并使圆弧与这两条切线都相切。 1996 1997 1998### ellipse 1999 2000ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 2001 2002在规定的矩形区域绘制一个椭圆。 2003 2004**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2005 2006**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2007 2008**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2009 2010 **参数：** 2011 2012| 参数名 | 类型 | 必填 | 说明 | 2013| ---------------- | ------- | ---- | ---------------------------------------- | 2014| x | number | 是 | 椭圆圆心的x轴坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 2015| y | number | 是 | 椭圆圆心的y轴坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 2016| radiusX | number | 是 | 椭圆x轴的半径长度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 2017| radiusY | number | 是 | 椭圆y轴的半径长度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 2018| rotation | number | 是 | 椭圆的旋转角度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>单位为弧度。 | 2019| startAngle | number | 是 | 椭圆绘制的起始点角度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>单位为弧度。 | 2020| endAngle | number | 是 | 椭圆绘制的结束点角度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>单位为弧度。 | 2021| counterclockwise | boolean | 否 | 是否以逆时针方向绘制椭圆。<br>true：逆时针方向绘制椭圆。<br>false：顺时针方向绘制椭圆。<br>默认值：false，设置null或undefined按默认值处理。 | 2022 2023 **示例：** 2024 2025 ```ts 2026 // xxx.ets 2027 @Entry 2028 @Component 2029 struct CanvasExample { 2030 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2031 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2032 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2033 build() { 2034 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2035 Canvas(this.context) 2036 .width('100%') 2037 .height('100%') 2038 .backgroundColor('#ffff00') 2039 .onReady(() =>{ 2040 let offContext = this.offCanvas.getContext("2d", this.settings) 2041 offContext.beginPath() 2042 offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false) 2043 offContext.stroke() 2044 offContext.beginPath() 2045 offContext.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true) 2046 offContext.stroke() 2047 let image = this.offCanvas.transferToImageBitmap() 2048 this.context.transferFromImageBitmap(image) 2049 }) 2050 } 2051 .width('100%') 2052 .height('100%') 2053 } 2054 } 2055 ``` 2056 2057  2058 2059 2060### rect 2061 2062rect(x: number, y: number, w: number, h: number): void 2063 2064创建矩形路径。 2065 2066**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2067 2068**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2069 2070**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2071 2072 **参数：** 2073 2074| 参数名 | 类型 | 必填 | 说明 | 2075| ---- | ------ | ---- | ------------- | 2076| x | number | 是 | 指定矩形的左上角x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 2077| y | number | 是 | 指定矩形的左上角y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 2078| w | number | 是 | 指定矩形的宽度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 2079| h | number | 是 | 指定矩形的高度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 2080 2081 **示例：** 2082 2083 ```ts 2084 // xxx.ets 2085 @Entry 2086 @Component 2087 struct CanvasExample { 2088 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2089 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2090 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2091 2092 build() { 2093 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2094 Canvas(this.context) 2095 .width('100%') 2096 .height('100%') 2097 .backgroundColor('#ffff00') 2098 .onReady(() =>{ 2099 let offContext = this.offCanvas.getContext("2d", this.settings) 2100 offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2101 offContext.stroke() 2102 let image = this.offCanvas.transferToImageBitmap() 2103 this.context.transferFromImageBitmap(image) 2104 }) 2105 } 2106 .width('100%') 2107 .height('100%') 2108 } 2109 } 2110 ``` 2111 2112  2113 2114### roundRect<sup>20+</sup> 2115 2116roundRect(x: number, y: number, w: number, h: number, radii?: number | Array\<number>): void 2117 2118创建圆角矩形路径，此方法不会直接渲染内容，如需将圆角矩形绘制到画布上，可以使用fill或stroke方法。 2119 2120**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 2121 2122**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 2123 2124**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2125 2126**参数：** 2127 2128| 参数名 | 类型 | 必填 | 说明 | 2129| ---- | ------ | ---- | ------------- | 2130| x | number | 是 | 指定矩形的左上角x坐标值。<br>null按0处理，undefined按无效值处理，不进行绘制。<br>如需绘制完整矩形，取值范围：[0, Canvas宽度)。<br>默认单位：vp | 2131| y | number | 是 | 指定矩形的左上角y坐标值。<br>null按0处理，undefined按无效值处理，不进行绘制。<br>如需绘制完整矩形，取值范围：[0, Canvas高度)。<br>默认单位：vp | 2132| w | number | 是 | 指定矩形的宽度，设置负值为向左绘制。<br>null按0处理，undefined按无效值处理，不进行绘制。<br>如需绘制完整矩形，取值范围：[-x, Canvas宽度 - x]。<br>默认单位：vp | 2133| h | number | 是 | 指定矩形的高度，设置负值为向上绘制。<br>null按0处理，undefined按无效值处理，不进行绘制。<br>如需绘制完整矩形，取值范围：[-y, Canvas高度 - y]。<br>默认单位：vp | 2134| radii | number \| Array\<number> | 否 | 指定用于矩形角的圆弧半径的数字或列表。<br>参数类型为number时，所有矩形角的圆弧半径按该数字执行。<br>参数类型为Array\<number>时，数目为1-4个按下面执行：<br>[所有矩形角的圆弧半径]<br>[左上及右下矩形角的圆弧半径, 右上及左下矩形角的圆弧半径]<br>[左上矩形角的圆弧半径, 右上及左下矩形角的圆弧半径, 右下矩形角的圆弧半径]<br>[左上矩形角的圆弧半径, 右上矩形角的圆弧半径, 右下矩形角的圆弧半径, 左下矩形角的圆弧半径]<br>radii存在负数或列表的数目不在[1,4]内时抛出异常，错误码：103701。<br>默认值：0，null和undefined按默认值处理。<br>圆弧半径超过矩形宽高时会等比例缩放到宽高的长度。<br>默认单位：vp | 2135 2136**错误码：** 2137 2138以下错误码的详细介绍请参见[Canvas组件错误码](../errorcode-canvas.md)。 2139 2140| 错误码ID | 错误信息 | 可能原因 | 2141| -------- | -------- | -------- | 2142| 103701 | Parameter error.| 1. The param radii is a list that has zero or more than four elements; 2. The param radii contains negative value. | 2143 2144**示例：** 2145 2146该示例展示了绘制六个圆角矩形： 2147 21481. 创建一个(10vp, 10vp)为起点，宽高为100vp，四个矩形角圆弧半径为10vp的圆角矩形并填充； 2149 21502. 创建一个(120vp, 10vp)为起点，宽高为100vp，四个矩形角圆弧半径为10vp的圆角矩形并填充； 2151 21523. 创建一个(10vp, 120vp)为起点，宽高为100vp，左上矩形角圆弧半径及右下矩形角圆弧半径为10vp，右上矩形角圆弧半径及左下矩形角圆弧半径为20vp的圆角矩形并描边； 2153 21544. 创建一个(120vp, 120vp)为起点，宽高为100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径及左下矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp的圆角矩形并描边； 2155 21565. 创建一个(10vp, 230vp)为起点，宽高为100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp，左下矩形角圆弧半径为40vp的圆角矩形并描边； 2157 21586. 创建一个(220vp, 330vp)为起点，宽高为-100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp，左下矩形角圆弧半径为40vp的圆角矩形并描边。 2159 2160 ```ts 2161 // xxx.ets 2162 import { BusinessError } from '@kit.BasicServicesKit'; 2163 2164 @Entry 2165 @Component 2166 struct CanvasExample { 2167 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2168 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2169 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2170 2171 build() { 2172 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2173 Canvas(this.context) 2174 .width('100%') 2175 .height('100%') 2176 .backgroundColor('#D5D5D5') 2177 .onReady(() => { 2178 let offContext = this.offCanvas.getContext("2d", this.settings) 2179 try { 2180 offContext.fillStyle = '#707070' 2181 offContext.beginPath() 2182 // 创建一个(10vp, 10vp)为起点，宽高为100vp，四个矩形角圆弧半径为10vp的圆角矩形 2183 offContext.roundRect(10, 10, 100, 100, 10) 2184 // 创建一个(120vp, 10vp)为起点，宽高为100vp，四个矩形角圆弧半径为10vp的圆角矩形 2185 offContext.roundRect(120, 10, 100, 100, [10]) 2186 offContext.fill() 2187 offContext.beginPath() 2188 // 创建一个(10vp, 120vp)为起点，宽高为100vp，左上矩形角圆弧半径及右下矩形角圆弧半径为10vp，右上矩形角圆弧半径及左下矩形角圆弧半径为20vp的圆角矩形 2189 offContext.roundRect(10, 120, 100, 100, [10, 20]) 2190 // 创建一个(120vp, 120vp)为起点，宽高为100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径及左下矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp的圆角矩形 2191 offContext.roundRect(120, 120, 100, 100, [10, 20, 30]) 2192 // 创建一个(10vp, 230vp)为起点，宽高为100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp，左下矩形角圆弧半径为40vp的圆角矩形 2193 offContext.roundRect(10, 230, 100, 100, [10, 20, 30, 40]) 2194 // 创建一个(220vp, 330vp)为起点，宽高为-100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp，左下矩形角圆弧半径为40vp的圆角矩形 2195 offContext.roundRect(220, 330, -100, -100, [10, 20, 30, 40]) 2196 offContext.stroke() 2197 } catch (error) { 2198 let e: BusinessError = error as BusinessError; 2199 console.error(`Failed to create roundRect. Code: ${e.code}, message: ${e.message}`); 2200 } 2201 // 在离屏画布最近渲染的图像上创建一个ImageBitmap对象 2202 let image = this.offCanvas.transferToImageBitmap() 2203 // 将创建的ImageBitmap对象显示在Canvas画布上 2204 this.context.transferFromImageBitmap(image) 2205 }) 2206 } 2207 .width('100%') 2208 .height('100%') 2209 } 2210 } 2211 ``` 2212 2213  2214 2215 2216 2217### fill 2218 2219fill(fillRule?: CanvasFillRule): void 2220 2221对当前路径进行填充。 2222 2223**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2224 2225**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2226 2227**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2228 2229**参数:** 2230 2231| 参数名 | 类型 | 必填 | 说明 | 2232| -------- | -------------- | ---- | ---------------------------------------- | 2233| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule类型说明) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero"，"evenodd"。<br>默认值："nonzero" | 2234 2235 ```ts 2236 // xxx.ets 2237 @Entry 2238 @Component 2239 struct Fill { 2240 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2241 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2242 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2243 2244 build() { 2245 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2246 Canvas(this.context) 2247 .width('100%') 2248 .height('100%') 2249 .backgroundColor('#ffff00') 2250 .onReady(() =>{ 2251 let offContext = this.offCanvas.getContext("2d", this.settings) 2252 offContext.fillStyle = '#000000' 2253 offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2254 offContext.fill() 2255 let image = this.offCanvas.transferToImageBitmap() 2256 this.context.transferFromImageBitmap(image) 2257 }) 2258 } 2259 .width('100%') 2260 .height('100%') 2261 } 2262 } 2263 ``` 2264 2265  2266 2267### fill 2268 2269fill(path: Path2D, fillRule?: CanvasFillRule): void 2270 2271对指定路径进行填充。 2272 2273**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2274 2275**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2276 2277**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2278 2279**参数:** 2280 2281| 参数名 | 类型 | 必填 | 说明 | 2282| -------- | -------------- | ---- | ----------------- | 2283| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D填充路径。 | 2284| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule类型说明) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero"，"evenodd"。<br>默认值："nonzero" | 2285 2286**示例:** 2287 2288```ts 2289// xxx.ets 2290@Entry 2291@Component 2292struct Fill { 2293 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2294 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2295 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2296 2297 build() { 2298 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2299 Canvas(this.context) 2300 .width('100%') 2301 .height('100%') 2302 .backgroundColor('#ffff00') 2303 .onReady(() =>{ 2304 let offContext = this.offCanvas.getContext("2d", this.settings) 2305 let region = new Path2D() 2306 region.moveTo(30, 90) 2307 region.lineTo(110, 20) 2308 region.lineTo(240, 130) 2309 region.lineTo(60, 130) 2310 region.lineTo(190, 20) 2311 region.lineTo(270, 90) 2312 region.closePath() 2313 // Fill path 2314 offContext.fillStyle = '#00ff00' 2315 offContext.fill(region, "evenodd") 2316 let image = this.offCanvas.transferToImageBitmap() 2317 this.context.transferFromImageBitmap(image) 2318 }) 2319 } 2320 .width('100%') 2321 .height('100%') 2322 } 2323} 2324``` 2325 2326  2327 2328### clip 2329 2330clip(fillRule?: CanvasFillRule): void 2331 2332设置当前路径为剪切路径。 2333 2334**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2335 2336**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2337 2338**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2339 2340**参数:** 2341 2342| 参数名 | 类型 | 必填 | 说明 | 2343| -------- | -------------- | ---- | ---------------------------------------- | 2344| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule类型说明) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero"，"evenodd"。<br>默认值："nonzero" | 2345 2346 **示例：** 2347 2348 ```ts 2349 // xxx.ets 2350 @Entry 2351 @Component 2352 struct Clip { 2353 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2354 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2355 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2356 2357 build() { 2358 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2359 Canvas(this.context) 2360 .width('100%') 2361 .height('100%') 2362 .backgroundColor('#ffff00') 2363 .onReady(() =>{ 2364 let offContext = this.offCanvas.getContext("2d", this.settings) 2365 offContext.rect(0, 0, 100, 200) 2366 offContext.stroke() 2367 offContext.clip() 2368 offContext.fillStyle = "rgb(255,0,0)" 2369 offContext.fillRect(0, 0, 200, 200) 2370 let image = this.offCanvas.transferToImageBitmap() 2371 this.context.transferFromImageBitmap(image) 2372 }) 2373 } 2374 .width('100%') 2375 .height('100%') 2376 } 2377 } 2378 ``` 2379 2380  2381 2382### clip 2383 2384clip(path: Path2D, fillRule?: CanvasFillRule): void 2385 2386设置指定路径为剪切路径。 2387 2388**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2389 2390**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2391 2392**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2393 2394**参数:** 2395 2396| 参数名 | 类型 | 必填 | 描述 | 2397| -------- | -------------- | ---- | ---------------------------------------- | 2398| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D剪切路径。 | 2399| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule类型说明) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero"，"evenodd"。<br>默认值："nonzero" | 2400 2401 **示例：** 2402 2403 ```ts 2404 // xxx.ets 2405 @Entry 2406 @Component 2407 struct Clip { 2408 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2409 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2410 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2411 2412 build() { 2413 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2414 Canvas(this.context) 2415 .width('100%') 2416 .height('100%') 2417 .backgroundColor('#ffff00') 2418 .onReady(() =>{ 2419 let offContext = this.offCanvas.getContext("2d", this.settings) 2420 let region = new Path2D() 2421 region.moveTo(30, 90) 2422 region.lineTo(110, 20) 2423 region.lineTo(240, 130) 2424 region.lineTo(60, 130) 2425 region.lineTo(190, 20) 2426 region.lineTo(270, 90) 2427 region.closePath() 2428 offContext.clip(region,"evenodd") 2429 offContext.fillStyle = "rgb(0,255,0)" 2430 offContext.fillRect(0, 0, 600, 600) 2431 let image = this.offCanvas.transferToImageBitmap() 2432 this.context.transferFromImageBitmap(image) 2433 }) 2434 } 2435 .width('100%') 2436 .height('100%') 2437 } 2438 } 2439 ``` 2440 2441  2442 2443 2444### reset<sup>12+</sup> 2445 2446reset(): void 2447 2448将OffscreenCanvasRenderingContext2D重置为其默认状态，清除后台缓冲区、绘制状态栈、绘制路径和样式。 2449 2450**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2451 2452**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2453 2454**示例：** 2455 2456 ```ts 2457 // xxx.ets 2458 @Entry 2459 @Component 2460 struct Reset { 2461 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2462 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2463 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2464 2465 build() { 2466 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2467 Canvas(this.context) 2468 .width('100%') 2469 .height('100%') 2470 .backgroundColor('#ffff00') 2471 .onReady(() =>{ 2472 let offContext = this.offCanvas.getContext("2d", this.settings) 2473 offContext.fillStyle = '#0000ff' 2474 offContext.fillRect(20, 20, 150, 100) 2475 offContext.reset() 2476 offContext.fillRect(20, 150, 150, 100) 2477 let image = this.offCanvas.transferToImageBitmap() 2478 this.context.transferFromImageBitmap(image) 2479 }) 2480 } 2481 .width('100%') 2482 .height('100%') 2483 } 2484 } 2485 ``` 2486 2487  2488 2489### saveLayer<sup>12+</sup> 2490 2491saveLayer(): void 2492 2493创建一个图层。 2494 2495**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2496 2497**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2498 2499**示例：** 2500 2501 ```ts 2502 // xxx.ets 2503 @Entry 2504 @Component 2505 struct saveLayer { 2506 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2507 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2508 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2509 2510 build() { 2511 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2512 Canvas(this.context) 2513 .width('100%') 2514 .height('100%') 2515 .backgroundColor('#ffff00') 2516 .onReady(() => { 2517 let offContext = this.offCanvas.getContext("2d", this.settings) 2518 offContext.fillStyle = "#0000ff" 2519 offContext.fillRect(50,100,300,100) 2520 offContext.fillStyle = "#00ffff" 2521 offContext.fillRect(50,150,300,100) 2522 offContext.globalCompositeOperation = 'destination-over' 2523 offContext.saveLayer() 2524 offContext.globalCompositeOperation = 'source-over' 2525 offContext.fillStyle = "#ff0000" 2526 offContext.fillRect(100,50,100,300) 2527 offContext.fillStyle = "#00ff00" 2528 offContext.fillRect(150,50,100,300) 2529 offContext.restoreLayer() 2530 let image = this.offCanvas.transferToImageBitmap() 2531 this.context.transferFromImageBitmap(image) 2532 }) 2533 } 2534 .width('100%') 2535 .height('100%') 2536 } 2537 } 2538 ``` 2539  2540 2541### restoreLayer<sup>12+</sup> 2542 2543restoreLayer(): void 2544 2545恢复图像变换和裁剪状态至saveLayer前的状态，并将图层绘制在canvas上。restoreLayer示例同saveLayer。 2546 2547**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2548 2549**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2550 2551### resetTransform 2552 2553resetTransform(): void 2554 2555使用单位矩阵重新设置当前矩阵。 2556 2557**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2558 2559**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2560 2561**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2562 2563**示例：** 2564 2565 ```ts 2566 // xxx.ets 2567 @Entry 2568 @Component 2569 struct ResetTransform { 2570 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2571 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2572 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2573 2574 build() { 2575 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2576 Canvas(this.context) 2577 .width('100%') 2578 .height('100%') 2579 .backgroundColor('#ffff00') 2580 .onReady(() => { 2581 let offContext = this.offCanvas.getContext("2d", this.settings) 2582 offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2583 offContext.fillStyle = 'rgb(0,0,255)' 2584 offContext.fillRect(0, 0, 100, 100) 2585 offContext.resetTransform() 2586 offContext.fillStyle = 'rgb(255,0,0)' 2587 offContext.fillRect(0, 0, 100, 100) 2588 let image = this.offCanvas.transferToImageBitmap() 2589 this.context.transferFromImageBitmap(image) 2590 }) 2591 } 2592 .width('100%') 2593 .height('100%') 2594 } 2595 } 2596 ``` 2597  2598 2599### rotate 2600 2601rotate(angle: number): void 2602 2603针对当前坐标轴进行顺时针旋转。 2604 2605**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2606 2607**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2608 2609**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2610 2611 **参数：** 2612 2613| 参数名 | 类型 | 必填 | 说明 | 2614| ----- | ------ | ---- | ---------------------------------------- | 2615| angle | number | 是 | 设置顺时针旋转的弧度值，可以通过 degree * Math.PI / 180 将角度转换为弧度值。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。<br>单位：弧度 | 2616 2617 **示例：** 2618 2619 ```ts 2620 // xxx.ets 2621 @Entry 2622 @Component 2623 struct Rotate { 2624 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2625 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2626 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2627 2628 build() { 2629 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2630 Canvas(this.context) 2631 .width('100%') 2632 .height('100%') 2633 .backgroundColor('#ffff00') 2634 .onReady(() =>{ 2635 let offContext = this.offCanvas.getContext("2d", this.settings) 2636 offContext.rotate(45 * Math.PI / 180) 2637 offContext.fillRect(70, 20, 50, 50) 2638 let image = this.offCanvas.transferToImageBitmap() 2639 this.context.transferFromImageBitmap(image) 2640 }) 2641 } 2642 .width('100%') 2643 .height('100%') 2644 } 2645 } 2646 ``` 2647 2648  2649 2650 2651### scale 2652 2653scale(x: number, y: number): void 2654 2655设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 2656 2657**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2658 2659**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2660 2661**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2662 2663 **参数：** 2664 2665| 参数名 | 类型 | 必填 | 说明 | 2666| ---- | ------ | ---- | ----------- | 2667| x | number | 是 | 设置水平方向的缩放值。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2668| y | number | 是 | 设置垂直方向的缩放值。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2669 2670 **示例：** 2671 2672 ```ts 2673 // xxx.ets 2674 @Entry 2675 @Component 2676 struct Scale { 2677 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2678 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2679 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2680 2681 build() { 2682 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2683 Canvas(this.context) 2684 .width('100%') 2685 .height('100%') 2686 .backgroundColor('#ffff00') 2687 .onReady(() =>{ 2688 let offContext = this.offCanvas.getContext("2d", this.settings) 2689 offContext.lineWidth = 3 2690 offContext.strokeRect(30, 30, 50, 50) 2691 offContext.scale(2, 2) // Scale to 200% 2692 offContext.strokeRect(30, 30, 50, 50) 2693 let image = this.offCanvas.transferToImageBitmap() 2694 this.context.transferFromImageBitmap(image) 2695 }) 2696 } 2697 .width('100%') 2698 .height('100%') 2699 } 2700 } 2701 ``` 2702 2703  2704 2705 2706### transform 2707 2708transform(a: number, b: number, c: number, d: number, e: number, f: number): void 2709 2710transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 2711 2712**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2713 2714**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2715 2716**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2717 2718> **说明：** 2719> 2720> 图形中各个点变换后的坐标可通过下方坐标计算公式计算。 2721> 2722> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： 2723> 2724> - x' = a \* x + c \* y + e 2725> 2726> - y' = b \* x + d \* y + f 2727 2728**参数：** 2729 2730| 参数名 | 类型 | 必填 | 说明 | 2731| ---- | ------ | ---- | -------------------- | 2732| a | number | 是 | scaleX：指定水平缩放值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2733| b | number | 是 | skewY：指定垂直倾斜值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2734| c | number | 是 | skewX：指定水平倾斜值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2735| d | number | 是 | scaleY：指定垂直缩放值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2736| e | number | 是 | translateX：指定水平移动值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。<br>默认单位：vp | 2737| f | number | 是 | translateY：指定垂直移动值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。<br>默认单位：vp | 2738 2739 **示例：** 2740 2741 ```ts 2742 // xxx.ets 2743 @Entry 2744 @Component 2745 struct Transform { 2746 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2747 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2748 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2749 2750 build() { 2751 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2752 Canvas(this.context) 2753 .width('100%') 2754 .height('100%') 2755 .backgroundColor('rgb(213,213,213)') 2756 .onReady(() => { 2757 let offContext = this.offCanvas.getContext("2d", this.settings) 2758 offContext.fillStyle = 'rgb(112,112,112)' 2759 offContext.fillRect(0, 0, 100, 100) 2760 offContext.transform(1, 0.5, -0.5, 1, 10, 10) 2761 offContext.fillStyle = 'rgb(0,74,175)' 2762 offContext.fillRect(0, 0, 100, 100) 2763 offContext.transform(1, 0.5, -0.5, 1, 10, 10) 2764 offContext.fillStyle = 'rgb(39,135,217)' 2765 offContext.fillRect(0, 0, 100, 100) 2766 let image = this.offCanvas.transferToImageBitmap() 2767 this.context.transferFromImageBitmap(image) 2768 }) 2769 } 2770 .width('100%') 2771 .height('100%') 2772 } 2773 } 2774 ``` 2775 2776  2777 2778 2779### setTransform 2780 2781setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void 2782 2783setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 2784 2785**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2786 2787**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2788 2789**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2790 2791> **说明：** 2792> 2793> 图形中各个点变换后的坐标可通过下方坐标计算公式计算。 2794> 2795> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： 2796> 2797> - x' = a \* x + c \* y + e 2798> 2799> - y' = b \* x + d \* y + f 2800 2801**参数：** 2802 2803| 参数名 | 类型 | 必填 | 说明 | 2804| ---- | ------ | ---- | -------------------- | 2805| a | number | 是 | scaleX：指定水平缩放值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2806| b | number | 是 | skewY：指定垂直倾斜值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2807| c | number | 是 | skewX：指定水平倾斜值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2808| d | number | 是 | scaleY：指定垂直缩放值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。 | 2809| e | number | 是 | translateX：指定水平移动值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。<br>默认单位：vp | 2810| f | number | 是 | translateY：指定垂直移动值，支持设置负数。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。<br>默认单位：vp | 2811 2812 **示例：** 2813 2814 ```ts 2815 // xxx.ets 2816 @Entry 2817 @Component 2818 struct SetTransform { 2819 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2820 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2821 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 2822 2823 build() { 2824 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2825 Canvas(this.context) 2826 .width('100%') 2827 .height('100%') 2828 .backgroundColor('#ffff00') 2829 .onReady(() =>{ 2830 let offContext = this.offCanvas.getContext("2d", this.settings) 2831 offContext.fillStyle = 'rgb(255,0,0)' 2832 offContext.fillRect(0, 0, 100, 100) 2833 offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2834 offContext.fillStyle = 'rgb(0,0,255)' 2835 offContext.fillRect(0, 0, 100, 100) 2836 let image = this.offCanvas.transferToImageBitmap() 2837 this.context.transferFromImageBitmap(image) 2838 }) 2839 } 2840 .width('100%') 2841 .height('100%') 2842 } 2843 } 2844 ``` 2845 2846  2847 2848### setTransform 2849 2850setTransform(transform?: Matrix2D): void 2851 2852以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。 2853 2854**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2855 2856**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2857 2858**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2859 2860**参数：** 2861 2862| 参数名 | 类型 | 必填 | 描述 | 2863| --------- | ---------------------------------------- | ---- | ----- | 2864| transform | [Matrix2D](ts-components-canvas-matrix2d.md) | 否 | 变换矩阵。<br>默认值：null | 2865 2866**示例：** 2867 ```ts 2868 // xxx.ets 2869 @Entry 2870 @Component 2871 struct TransFormDemo { 2872 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2873 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2874 private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 200, this.settings); 2875 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2876 private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 200, this.settings); 2877 2878 build() { 2879 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2880 Text('context1'); 2881 Canvas(this.context1) 2882 .width('230vp') 2883 .height('160vp') 2884 .backgroundColor('#ffff00') 2885 .onReady(() =>{ 2886 this.offcontext1.fillRect(100, 20, 50, 50); 2887 this.offcontext1.setTransform(1, 0.5, -0.5, 1, 10, 10); 2888 this.offcontext1.fillRect(100, 20, 50, 50); 2889 let image = this.offcontext1.transferToImageBitmap(); 2890 this.context1.transferFromImageBitmap(image); 2891 }) 2892 Text('context2'); 2893 Canvas(this.context2) 2894 .width('230vp') 2895 .height('160vp') 2896 .backgroundColor('#0ffff0') 2897 .onReady(() =>{ 2898 this.offcontext2.fillRect(100, 20, 50, 50); 2899 let storedTransform = this.offcontext1.getTransform(); 2900 this.offcontext2.setTransform(storedTransform); 2901 this.offcontext2.fillRect(100, 20, 50, 50); 2902 let image = this.offcontext2.transferToImageBitmap(); 2903 this.context2.transferFromImageBitmap(image); 2904 }) 2905 } 2906 .width('100%') 2907 .height('100%') 2908 } 2909 } 2910 ``` 2911  2912 2913### getTransform 2914 2915getTransform(): Matrix2D 2916 2917获取当前被应用到上下文的转换矩阵。 2918 2919**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2920 2921**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2922 2923**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2924 2925**返回值：** 2926 2927| 类型 | 说明 | 2928| ---------------------------------------- | ----- | 2929| [Matrix2D](ts-components-canvas-matrix2d.md) | 当前被应用到上下文的转换矩阵。 | 2930 2931**示例：** 2932 2933 ```ts 2934 // xxx.ets 2935 @Entry 2936 @Component 2937 struct TransFormDemo { 2938 private settings: RenderingContextSettings = new RenderingContextSettings(true); 2939 private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2940 private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings); 2941 private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 2942 private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings); 2943 2944 build() { 2945 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2946 Text('context1'); 2947 Canvas(this.context1) 2948 .width('230vp') 2949 .height('120vp') 2950 .backgroundColor('#ffff00') 2951 .onReady(() =>{ 2952 this.offcontext1.fillRect(50, 50, 50, 50); 2953 this.offcontext1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25); 2954 this.offcontext1.fillRect(50, 50, 50, 50); 2955 let image = this.offcontext1.transferToImageBitmap(); 2956 this.context1.transferFromImageBitmap(image); 2957 }) 2958 Text('context2'); 2959 Canvas(this.context2) 2960 .width('230vp') 2961 .height('120vp') 2962 .backgroundColor('#0ffff0') 2963 .onReady(() =>{ 2964 this.offcontext2.fillRect(50, 50, 50, 50); 2965 let storedTransform = this.offcontext1.getTransform(); 2966 console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY + 2967 ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY + 2968 ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]") 2969 this.offcontext2.setTransform(storedTransform); 2970 this.offcontext2.fillRect(50,50,50,50); 2971 let image = this.offcontext2.transferToImageBitmap(); 2972 this.context2.transferFromImageBitmap(image); 2973 }) 2974 } 2975 .width('100%') 2976 .height('100%') 2977 } 2978 } 2979 ``` 2980 2981  2982 2983### translate 2984 2985translate(x: number, y: number): void 2986 2987移动当前坐标系的原点。 2988 2989**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2990 2991**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2992 2993**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2994 2995 **参数：** 2996 2997| 参数名 | 类型 | 必填 | 说明 | 2998| ---- | ------ | ---- | -------- | 2999| x | number | 是 | 设置水平平移量。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。<br>默认单位：vp | 3000| y | number | 是 | 设置垂直平移量。<br>API version 18之前，设置NaN或Infinity时，在该方法后执行的绘制方法无法绘制；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的绘制方法正常绘制。<br>默认单位：vp | 3001 3002 **示例：** 3003 3004 ```ts 3005 // xxx.ets 3006 @Entry 3007 @Component 3008 struct Translate { 3009 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3010 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3011 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3012 3013 build() { 3014 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3015 Canvas(this.context) 3016 .width('100%') 3017 .height('100%') 3018 .backgroundColor('#ffff00') 3019 .onReady(() =>{ 3020 let offContext = this.offCanvas.getContext("2d", this.settings) 3021 offContext.fillRect(10, 10, 50, 50) 3022 offContext.translate(70, 70) 3023 offContext.fillRect(10, 10, 50, 50) 3024 let image = this.offCanvas.transferToImageBitmap() 3025 this.context.transferFromImageBitmap(image) 3026 }) 3027 } 3028 .width('100%') 3029 .height('100%') 3030 } 3031 } 3032 ``` 3033 3034  3035 3036 3037### drawImage 3038 3039drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void 3040 3041进行图像绘制。 3042 3043**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 3044 3045**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3046 3047**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3048 3049 **参数：** 3050 3051| 参数 | 类型 | 必填 | 说明 | 3052| ----- | ---------------------------------------- | ---- | ----------------------------- | 3053| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) \| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 3054| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp | 3055| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp | 3056 3057 **示例：** 3058 3059 ```ts 3060 // xxx.ets 3061 @Entry 3062 @Component 3063 struct DrawImage { 3064 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3065 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3066 // "common/images/example.jpg"需要替换为开发者所需的图像资源文件 3067 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg"); 3068 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3069 3070 build() { 3071 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3072 Canvas(this.context) 3073 .width('100%') 3074 .height('100%') 3075 .backgroundColor('#D5D5D5') 3076 .onReady(() => { 3077 let offContext = this.offCanvas.getContext("2d", this.settings) 3078 offContext.drawImage(this.img, 0, 0) 3079 let image = this.offCanvas.transferToImageBitmap() 3080 this.context.transferFromImageBitmap(image) 3081 }) 3082 } 3083 .width('100%') 3084 .height('100%') 3085 } 3086 } 3087 ``` 3088 3089  3090 3091### drawImage 3092 3093drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void 3094 3095将图像拉伸或压缩绘制。 3096 3097**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 3098 3099**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3100 3101**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3102 3103 **参数：** 3104 3105| 参数 | 类型 | 必填 | 说明 | 3106| ----- | ---------------------------------------- | ---- | ----------------------------- | 3107| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) \| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 3108| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp | 3109| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp | 3110| dw | number | 是 | 绘制区域的宽度。<br>默认单位：vp | 3111| dh | number | 是 | 绘制区域的高度。<br>默认单位：vp | 3112 3113 **示例：** 3114 3115 ```ts 3116 // xxx.ets 3117 @Entry 3118 @Component 3119 struct DrawImage { 3120 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3121 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3122 // "common/images/example.jpg"需要替换为开发者所需的图像资源文件 3123 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg"); 3124 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3125 3126 build() { 3127 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3128 Canvas(this.context) 3129 .width('100%') 3130 .height('100%') 3131 .backgroundColor('#D5D5D5') 3132 .onReady(() => { 3133 let offContext = this.offCanvas.getContext("2d", this.settings) 3134 offContext.drawImage(this.img, 0, 0, 300, 300) 3135 let image = this.offCanvas.transferToImageBitmap() 3136 this.context.transferFromImageBitmap(image) 3137 }) 3138 } 3139 .width('100%') 3140 .height('100%') 3141 } 3142 } 3143 ``` 3144 3145  3146 3147### drawImage 3148 3149drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void 3150 3151将图像裁剪后拉伸或压缩绘制。 3152 3153**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。 3154 3155**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3156 3157**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3158 3159 **参数：** 3160 3161| 参数 | 类型 | 必填 | 说明 | 3162| ----- | ---------------------------------------- | ---- | ----------------------------- | 3163| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) \| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片资源，请参考ImageBitmap或PixelMap。 | 3164| sx | number | 是 | 裁切源图像时距离源图像左上角的x坐标值。<br>image类型为ImageBitmap时，默认单位：vp<br>image类型为PixelMap时，API version 18前，默认单位：px；API version 18及以后，默认单位：vp | 3165| sy | number | 是 | 裁切源图像时距离源图像左上角的y坐标值。<br>image类型为ImageBitmap时，默认单位：vp<br>image类型为PixelMap时，API version 18前，默认单位：px；API version 18及以后，默认单位：vp | 3166| sw | number | 是 | 裁切源图像时需要裁切的宽度。<br>image类型为ImageBitmap时，默认单位：vp<br>image类型为PixelMap时，API version 18前，默认单位：px；API version 18及以后，默认单位：vp | 3167| sh | number | 是 | 裁切源图像时需要裁切的高度。<br>image类型为ImageBitmap时，默认单位：vp<br>image类型为PixelMap时，API version 18前，默认单位：px；API version 18及以后，默认单位：vp | 3168| dx | number | 是 | 绘制区域左上角在x轴的位置。<br>默认单位：vp | 3169| dy | number | 是 | 绘制区域左上角在y轴的位置。<br>默认单位：vp | 3170| dw | number | 是 | 绘制区域的宽度。<br>默认单位：vp | 3171| dh | number | 是 | 绘制区域的高度。<br>默认单位：vp | 3172 3173 **示例：** 3174 3175 ```ts 3176 // xxx.ets 3177 @Entry 3178 @Component 3179 struct DrawImage { 3180 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3181 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3182 // "common/images/example.jpg"需要替换为开发者所需的图像资源文件 3183 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg"); 3184 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3185 3186 build() { 3187 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3188 Canvas(this.context) 3189 .width('100%') 3190 .height('100%') 3191 .backgroundColor('#D5D5D5') 3192 .onReady(() => { 3193 let offContext = this.offCanvas.getContext("2d", this.settings) 3194 offContext.drawImage(this.img, 0, 0, 500, 500, 0, 0, 400, 300) 3195 let image = this.offCanvas.transferToImageBitmap() 3196 this.context.transferFromImageBitmap(image) 3197 }) 3198 } 3199 .width('100%') 3200 .height('100%') 3201 } 3202 } 3203 ``` 3204 3205  3206 3207### createImageData 3208 3209createImageData(sw: number, sh: number): ImageData 3210 3211根据当前ImageData对象重新创建一个宽、高相同的ImageData对象，请参考[ImageData](ts-components-canvas-imagedata.md)，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。 3212 3213**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3214 3215**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3216 3217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3218 3219 **参数：** 3220 3221| 参数名 | 类型 | 必填 | 说明 | 3222| ---- | ------ | ---- | ------------- | 3223| sw | number | 是 | ImageData的宽度。<br>默认单位：vp | 3224| sh | number | 是 | ImageData的高度。<br>默认单位：vp | 3225 3226 **返回值：** 3227 3228| 类型 | 说明 | 3229| ---------------------------------------- | ------------- | 3230| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 | 3231 3232### createImageData 3233 3234createImageData(imageData: ImageData): ImageData 3235 3236根据已创建的ImageData对象创建新的ImageData对象（不会复制图像数据），请参考[ImageData](ts-components-canvas-imagedata.md)，该接口存在内存拷贝行为，高耗时，应避免频繁使用。createImageData示例同putImageData。 3237 3238**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3239 3240 **参数：** 3241 3242| 参数名 | 类型 | 必填 | 说明 | 3243| --------- | ---------------------------------------- | ---- | ---------------- | 3244| imageData | [ImageData](ts-components-canvas-imagedata.md) | 是 | 被复制的ImageData对象。 | 3245 3246 **返回值：** 3247 3248| 类型 | 说明 | 3249| ---------------------------------------- | ------------- | 3250| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 | 3251 3252### getPixelMap 3253 3254getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 3255 3256以当前canvas指定区域内的像素创建[PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3257 3258**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3259 3260**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3261 3262 **参数：** 3263 3264| 参数 | 类型 | 必填 | 说明 | 3265| ---- | ------ | ---- | --------------- | 3266| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp | 3267| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp | 3268| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp | 3269| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp | 3270 3271**返回值：** 3272 3273| 类型 | 说明 | 3274| ---------------------------------------- | ------------ | 3275| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 新的PixelMap对象。 | 3276 3277**示例：** 3278 3279> **说明：** 3280> 3281> DevEco Studio的预览器不支持显示使用setPixelMap绘制的内容。 3282 3283 ```ts 3284 // xxx.ets 3285 @Entry 3286 @Component 3287 struct GetPixelMap { 3288 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3289 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3290 // "common/images/example.jpg"需要替换为开发者所需的图像资源文件 3291 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg"); 3292 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3293 3294 build() { 3295 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3296 Canvas(this.context) 3297 .width('100%') 3298 .height('100%') 3299 .backgroundColor('#ffff00') 3300 .onReady(() => { 3301 let offContext = this.offCanvas.getContext("2d", this.settings) 3302 offContext.drawImage(this.img, 100, 100, 130, 130) 3303 let pixelmap = offContext.getPixelMap(150, 150, 130, 130) 3304 offContext.setPixelMap(pixelmap) 3305 let image = this.offCanvas.transferToImageBitmap() 3306 this.context.transferFromImageBitmap(image) 3307 }) 3308 } 3309 .width('100%') 3310 .height('100%') 3311 } 3312 } 3313 ``` 3314 3315  3316 3317### setPixelMap 3318 3319setPixelMap(value?: PixelMap): void 3320 3321将当前传入[PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md)对象绘制在画布上。setPixelMap示例同getPixelMap。 3322 3323**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3324 3325**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3326 3327 **参数：** 3328 3329| 参数名 | 类型 | 必填 | 说明 | 3330| ---- | ------ | ---- | --------------- | 3331| value | [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 否 | 包含像素值的PixelMap对象<br>默认值：null | 3332 3333 3334### getImageData 3335 3336getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 3337 3338以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3339 3340**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3341 3342**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3343 3344**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3345 3346 **参数：** 3347 3348| 参数名 | 类型 | 必填 | 说明 | 3349| ---- | ------ | ---- | --------------- | 3350| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp | 3351| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp | 3352| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp | 3353| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp | 3354 3355 **返回值：** 3356 3357| 类型 | 说明 | 3358| ---------------------------------------- | ------------- | 3359| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 | 3360 3361 3362**示例：** 3363 3364 ```ts 3365 // xxx.ets 3366 @Entry 3367 @Component 3368 struct GetImageData { 3369 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3370 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3371 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3372 // "/common/images/1234.png"需要替换为开发者所需的图像资源文件 3373 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png"); 3374 3375 build() { 3376 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3377 Canvas(this.context) 3378 .width('100%') 3379 .height('100%') 3380 .backgroundColor('#ffff00') 3381 .onReady(() =>{ 3382 let offContext = this.offCanvas.getContext("2d", this.settings) 3383 offContext.drawImage(this.img,0,0,130,130) 3384 let imageData = offContext.getImageData(50,50,130,130) 3385 offContext.putImageData(imageData,150,150) 3386 let image = this.offCanvas.transferToImageBitmap() 3387 this.context.transferFromImageBitmap(image) 3388 }) 3389 } 3390 .width('100%') 3391 .height('100%') 3392 } 3393 } 3394 ``` 3395 3396  3397 3398 3399### putImageData 3400 3401putImageData(imageData: ImageData, dx: number | string, dy: number | string): void 3402 3403使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3404 3405**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3406 3407**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3408 3409**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3410 3411 **参数：** 3412 3413| 参数名 | 类型 | 必填 | 描述 | 3414| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3415| imageData | [ImageData](ts-components-canvas-imagedata.md) | 是 | 包含像素值的ImageData对象。 | 3416| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp | 3417| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp | 3418 3419 **示例：** 3420 3421 ```ts 3422 // xxx.ets 3423 @Entry 3424 @Component 3425 struct PutImageData { 3426 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3427 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3428 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3429 3430 build() { 3431 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3432 Canvas(this.context) 3433 .width('100%') 3434 .height('100%') 3435 .backgroundColor('rgb(213,213,213)') 3436 .onReady(() => { 3437 let offContext = this.offCanvas.getContext("2d", this.settings) 3438 let imageDataNum = offContext.createImageData(100, 100) 3439 let imageData = offContext.createImageData(imageDataNum) 3440 for (let i = 0; i < imageData.data.length; i += 4) { 3441 imageData.data[i + 0] = 112 3442 imageData.data[i + 1] = 112 3443 imageData.data[i + 2] = 112 3444 imageData.data[i + 3] = 255 3445 } 3446 offContext.putImageData(imageData, 10, 10) 3447 let image = this.offCanvas.transferToImageBitmap() 3448 this.context.transferFromImageBitmap(image) 3449 }) 3450 } 3451 .width('100%') 3452 .height('100%') 3453 } 3454 } 3455 ``` 3456 3457  3458 3459### putImageData 3460 3461putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth?: number | string, dirtyHeight: number | string): void 3462 3463使用[ImageData](ts-components-canvas-imagedata.md)数据裁剪后填充至新的矩形区域。 3464 3465**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3466 3467**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3468 3469**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3470 3471 **参数：** 3472 3473| 参数名 | 类型 | 必填 | 描述 | 3474| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3475| imageData | [ImageData](ts-components-canvas-imagedata.md) | 是 | 包含像素值的ImageData对象。 | 3476| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp | 3477| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp | 3478| dirtyX | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。<br>默认单位：vp | 3479| dirtyY | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。<br>默认单位：vp | 3480| dirtyWidth | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的宽度。<br>默认单位：vp | 3481| dirtyHeight | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的高度。<br>默认单位：vp | 3482 3483 **示例：** 3484 3485 ```ts 3486 // xxx.ets 3487 @Entry 3488 @Component 3489 struct PutImageData { 3490 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3491 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3492 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3493 3494 build() { 3495 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3496 Canvas(this.context) 3497 .width('100%') 3498 .height('100%') 3499 .backgroundColor('rgb(213,213,213)') 3500 .onReady(() => { 3501 let offContext = this.offCanvas.getContext("2d", this.settings) 3502 let imageDataNum = offContext.createImageData(100, 100) 3503 let imageData = offContext.createImageData(imageDataNum) 3504 for (let i = 0; i < imageData.data.length; i += 4) { 3505 imageData.data[i + 0] = 112 3506 imageData.data[i + 1] = 112 3507 imageData.data[i + 2] = 112 3508 imageData.data[i + 3] = 255 3509 } 3510 offContext.putImageData(imageData, 10, 10, 0, 0, 100, 50) 3511 let image = this.offCanvas.transferToImageBitmap() 3512 this.context.transferFromImageBitmap(image) 3513 }) 3514 } 3515 .width('100%') 3516 .height('100%') 3517 } 3518 } 3519 ``` 3520 3521  3522 3523### setLineDash 3524 3525setLineDash(segments: number[]): void 3526 3527设置画布的虚线样式。 3528 3529**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3530 3531**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3532 3533**参数：** 3534 3535| 参数名 | 类型 | 必填 | 说明 | 3536| -------- | -------- | -------- | ------------------- | 3537| segments | number[] | 是 | 描述线段如何交替和线段间距长度的数组。<br>默认单位：vp | 3538 3539**示例：** 3540 3541 ```ts 3542 @Entry 3543 @Component 3544 struct SetLineDash { 3545 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3546 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3547 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3548 3549 build() { 3550 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3551 Canvas(this.context) 3552 .width('100%') 3553 .height('100%') 3554 .backgroundColor('#ffff00') 3555 .onReady(() =>{ 3556 let offContext = this.offCanvas.getContext("2d", this.settings) 3557 offContext.arc(100, 75, 50, 0, 6.28) 3558 offContext.setLineDash([10,20]) 3559 offContext.stroke() 3560 let image = this.offCanvas.transferToImageBitmap() 3561 this.context.transferFromImageBitmap(image) 3562 }) 3563 } 3564 .width('100%') 3565 .height('100%') 3566 } 3567 } 3568 ``` 3569  3570 3571 3572### getLineDash 3573 3574getLineDash(): number[] 3575 3576获得当前画布的虚线样式。 3577 3578**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3579 3580**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3581 3582**返回值：** 3583 3584| 类型 | 说明 | 3585| -------- | ------------------------ | 3586| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。<br>默认单位：vp | 3587 3588**示例：** 3589 3590 ```ts 3591 // xxx.ets 3592 @Entry 3593 @Component 3594 struct OffscreenCanvasGetLineDash { 3595 @State message: string = 'Hello World'; 3596 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3597 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3598 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3599 build() { 3600 Row() { 3601 Column() { 3602 Text(this.message) 3603 .fontSize(50) 3604 .fontWeight(FontWeight.Bold) 3605 .onClick(()=>{ 3606 console.error('before getlinedash clicked') 3607 let offContext = this.offCanvas.getContext("2d", this.settings) 3608 let res = offContext.getLineDash() 3609 console.error(JSON.stringify(res)) 3610 }) 3611 Canvas(this.context) 3612 .width('100%') 3613 .height('100%') 3614 .backgroundColor('#ffff00') 3615 .onReady(() => { 3616 let offContext = this.offCanvas.getContext("2d", this.settings) 3617 offContext.arc(100, 75, 50, 0, 6.28) 3618 offContext.setLineDash([10,20]) 3619 offContext.stroke() 3620 let res = offContext.getLineDash() 3621 let image = this.offCanvas.transferToImageBitmap() 3622 this.context.transferFromImageBitmap(image) 3623 }) 3624 } 3625 .width('100%') 3626 } 3627 .height('100%') 3628 } 3629 } 3630 ``` 3631 3632 3633 3634 3635### toDataURL 3636 3637toDataURL(type?: string, quality?: any): string 3638 3639生成一个包含图片展示的URL，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3640 3641**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3642 3643**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3644 3645**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3646 3647**参数：** 3648 3649| 参数名 | 类型 | 必填 | 说明 | 3650| ------- | ------ | ---- | ---------------------------------------- | 3651| type | string | 否 | 用于指定图像格式。<br/>可选参数为："image/png"，"image/jpeg"，"image/webp"。<br>默认值：image/png | 3652| quality | any | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。<br>默认值：0.92 | 3653 3654**返回值：** 3655 3656| 类型 | 说明 | 3657| ------ | --------- | 3658| string | 图像的URL地址。 | 3659 3660**示例：** 3661 3662 ```ts 3663 // xxx.ets 3664 @Entry 3665 @Component 3666 struct ToDataURL { 3667 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3668 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3669 private offCanvas: OffscreenCanvas = new OffscreenCanvas(100, 100); 3670 @State dataURL: string = ""; 3671 3672 build() { 3673 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3674 Canvas(this.context) 3675 .width(100) 3676 .height(100) 3677 .onReady(() => { 3678 let offContext = this.offCanvas.getContext("2d", this.settings) 3679 offContext.fillRect(0,0,100,100) 3680 this.dataURL = offContext.toDataURL() 3681 }) 3682 Text(this.dataURL) 3683 } 3684 .width('100%') 3685 .height('100%') 3686 .backgroundColor('#ffff00') 3687 } 3688 } 3689 ``` 3690 3691 3692 3693### transferToImageBitmap 3694 3695transferToImageBitmap(): ImageBitmap 3696 3697在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 3698 3699**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3700 3701**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3702 3703**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3704 3705**返回值：** 3706 3707| 类型 | 说明 | 3708| ---------------------------------------- | --------------- | 3709| [ImageBitmap](ts-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 | 3710 3711 3712 **示例：** 3713 3714 ```ts 3715 // xxx.ets 3716 @Entry 3717 @Component 3718 struct PutImageData { 3719 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3720 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3721 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3722 3723 build() { 3724 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3725 Canvas(this.context) 3726 .width('100%') 3727 .height('100%') 3728 .backgroundColor('rgb(213,213,213)') 3729 .onReady(() => { 3730 let offContext = this.offCanvas.getContext("2d", this.settings) 3731 let imageData = offContext.createImageData(100, 100) 3732 for (let i = 0; i < imageData.data.length; i += 4) { 3733 imageData.data[i + 0] = 112 3734 imageData.data[i + 1] = 112 3735 imageData.data[i + 2] = 112 3736 imageData.data[i + 3] = 255 3737 } 3738 offContext.putImageData(imageData, 10, 10) 3739 let image = this.offCanvas.transferToImageBitmap() 3740 this.context.transferFromImageBitmap(image) 3741 }) 3742 } 3743 .width('100%') 3744 .height('100%') 3745 } 3746 } 3747 ``` 3748 3749 3750### restore 3751 3752restore(): void 3753 3754对保存的绘图上下文进行恢复。 3755 3756> **说明：** 3757> 3758> 当restore()次数未超出save()次数时，从栈中弹出存储的绘制状态并恢复CanvasRenderingContext2D对象的属性、剪切路径和变换矩阵的值。</br> 3759> 当restore()次数超出save()次数时，此方法不做任何改变。</br> 3760> 当没有保存状态时，此方法不做任何改变。 3761 3762**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3763 3764**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3765 3766**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3767 3768 **示例：** 3769 3770 ```ts 3771 // xxx.ets 3772 @Entry 3773 @Component 3774 struct CanvasExample { 3775 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3776 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3777 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3778 3779 build() { 3780 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3781 Canvas(this.context) 3782 .width('100%') 3783 .height('100%') 3784 .backgroundColor('#ffff00') 3785 .onReady(() =>{ 3786 let offContext = this.offCanvas.getContext("2d", this.settings) 3787 offContext.save() // save the default state 3788 offContext.fillStyle = "#00ff00" 3789 offContext.fillRect(20, 20, 100, 100) 3790 offContext.restore() // restore to the default state 3791 offContext.fillRect(150, 75, 100, 100) 3792 let image = this.offCanvas.transferToImageBitmap() 3793 this.context.transferFromImageBitmap(image) 3794 }) 3795 } 3796 .width('100%') 3797 .height('100%') 3798 } 3799 } 3800 ``` 3801 3802 3803 3804### save 3805 3806save(): void 3807 3808对当前的绘图上下文进行保存。 3809 3810**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3811 3812**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3813 3814**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3815 3816 **示例：** 3817 3818 ```ts 3819 // xxx.ets 3820 @Entry 3821 @Component 3822 struct CanvasExample { 3823 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3824 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3825 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3826 3827 build() { 3828 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3829 Canvas(this.context) 3830 .width('100%') 3831 .height('100%') 3832 .backgroundColor('#ffff00') 3833 .onReady(() =>{ 3834 let offContext = this.offCanvas.getContext("2d", this.settings) 3835 offContext.save() // save the default state 3836 offContext.fillStyle = "#00ff00" 3837 offContext.fillRect(20, 20, 100, 100) 3838 offContext.restore() // restore to the default state 3839 offContext.fillRect(150, 75, 100, 100) 3840 let image = this.offCanvas.transferToImageBitmap() 3841 this.context.transferFromImageBitmap(image) 3842 }) 3843 } 3844 .width('100%') 3845 .height('100%') 3846 } 3847 } 3848 ``` 3849 3850 3851 3852### createLinearGradient 3853 3854createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient 3855 3856创建一个线性渐变色。 3857 3858**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3859 3860**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3861 3862**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3863 3864 **参数：** 3865 3866| 参数名 | 类型 | 必填 | 说明 | 3867| ---- | ------ | ---- | -------- | 3868| x0 | number | 是 | 起点的x轴坐标。<br>默认单位：vp | 3869| y0 | number | 是 | 起点的y轴坐标。<br>默认单位：vp | 3870| x1 | number | 是 | 终点的x轴坐标。<br>默认单位：vp | 3871| y1 | number | 是 | 终点的y轴坐标。<br>默认单位：vp | 3872 3873**返回值：** 3874 3875| 类型 | 说明 | 3876| ------ | --------- | 3877| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 3878 3879 **示例：** 3880 3881 ```ts 3882 // xxx.ets 3883 @Entry 3884 @Component 3885 struct CreateLinearGradient { 3886 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3887 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3888 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3889 3890 build() { 3891 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3892 Canvas(this.context) 3893 .width('100%') 3894 .height('100%') 3895 .backgroundColor('#ffff00') 3896 .onReady(() =>{ 3897 let offContext = this.offCanvas.getContext("2d", this.settings) 3898 let grad = offContext.createLinearGradient(50,0, 300,100) 3899 grad.addColorStop(0.0, '#ff0000') 3900 grad.addColorStop(0.5, '#ffffff') 3901 grad.addColorStop(1.0, '#00ff00') 3902 offContext.fillStyle = grad 3903 offContext.fillRect(0, 0, 400, 400) 3904 let image = this.offCanvas.transferToImageBitmap() 3905 this.context.transferFromImageBitmap(image) 3906 }) 3907 } 3908 .width('100%') 3909 .height('100%') 3910 } 3911 } 3912 ``` 3913 3914  3915 3916 3917### createRadialGradient 3918 3919createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient 3920 3921创建一个径向渐变色。 3922 3923**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3924 3925**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3926 3927**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3928 3929 **参数：** 3930 3931| 参数名 | 类型 | 必填 | 说明 | 3932| ---- | ------ | ---- | ----------------- | 3933| x0 | number | 是 | 起始圆的x轴坐标。<br>默认单位：vp | 3934| y0 | number | 是 | 起始圆的y轴坐标。<br>默认单位：vp | 3935| r0 | number | 是 | 起始圆的半径。必须是非负且有限的。<br>默认单位：vp | 3936| x1 | number | 是 | 终点圆的x轴坐标。<br>默认单位：vp | 3937| y1 | number | 是 | 终点圆的y轴坐标。<br>默认单位：vp | 3938| r1 | number | 是 | 终点圆的半径。必须为非负且有限的。<br>默认单位：vp | 3939 3940**返回值：** 3941 3942| 类型 | 说明 | 3943| ------ | --------- | 3944| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 3945 3946 **示例：** 3947 3948 ```ts 3949 // xxx.ets 3950 @Entry 3951 @Component 3952 struct CreateRadialGradient { 3953 private settings: RenderingContextSettings = new RenderingContextSettings(true); 3954 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 3955 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 3956 3957 build() { 3958 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3959 Canvas(this.context) 3960 .width('100%') 3961 .height('100%') 3962 .backgroundColor('#ffff00') 3963 .onReady(() =>{ 3964 let offContext = this.offCanvas.getContext("2d", this.settings) 3965 let grad = offContext.createRadialGradient(200,200,50, 200,200,200) 3966 grad.addColorStop(0.0, '#ff0000') 3967 grad.addColorStop(0.5, '#ffffff') 3968 grad.addColorStop(1.0, '#00ff00') 3969 offContext.fillStyle = grad 3970 offContext.fillRect(0, 0, 440, 440) 3971 let image = this.offCanvas.transferToImageBitmap() 3972 this.context.transferFromImageBitmap(image) 3973 }) 3974 } 3975 .width('100%') 3976 .height('100%') 3977 } 3978 } 3979 ``` 3980 3981  3982 3983### createConicGradient<sup>10+</sup> 3984 3985createConicGradient(startAngle: number, x: number, y: number): CanvasGradient 3986 3987创建一个圆锥渐变色。 3988 3989**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3990 3991**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3992 3993**参数：** 3994 3995| 参数名 | 类型 | 必填 | 说明 | 3996| ---------- | ------ | ---- | ----------------------------------- | 3997| startAngle | number | 是 | 开始渐变的角度。角度测量从中心右侧水平开始，顺时针移动。<br>单位：弧度 | 3998| x | number | 是 | 圆锥渐变的中心x轴坐标。<br>默认单位：vp | 3999| y | number | 是 | 圆锥渐变的中心y轴坐标。<br>默认单位：vp | 4000 4001**返回值：** 4002 4003| 类型 | 说明 | 4004| ------ | --------- | 4005| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 4006 4007**示例：** 4008 4009```ts 4010// xxx.ets 4011@Entry 4012@Component 4013struct OffscreenCanvasConicGradientPage { 4014 private settings: RenderingContextSettings = new RenderingContextSettings(true); 4015 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 4016 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); 4017 4018 build() { 4019 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 4020 Canvas(this.context) 4021 .width('100%') 4022 .height('100%') 4023 .backgroundColor('#ffffff') 4024 .onReady(() =>{ 4025 let offContext = this.offCanvas.getContext("2d", this.settings) 4026 let grad = offContext.createConicGradient(0, 50, 80) 4027 grad.addColorStop(0.0, '#ff0000') 4028 grad.addColorStop(0.5, '#ffffff') 4029 grad.addColorStop(1.0, '#00ff00') 4030 offContext.fillStyle = grad 4031 offContext.fillRect(0, 30, 100, 100) 4032 let image = this.offCanvas.transferToImageBitmap() 4033 this.context.transferFromImageBitmap(image) 4034 }) 4035 } 4036 .width('100%') 4037 .height('100%') 4038 } 4039} 4040``` 4041 4042  4043
