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