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