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