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