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时，表示设置填充区域的颜色。<br/>默认值：'#000000'<br/>- 类型为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时，表示设置线条使用的颜色。<br/>默认值：'#000000'<br/>- 类型为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-size font-family'<br/>- font-size(可选)，指定字号和行高，单位支持px和vp。<br/>- font-family(可选)，指定字体系列。<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为完全不透明。<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。 <br/>默认值：0.0。<br/>单位：px。<br/>shadowBlur取值不支持负数，负数按异常值处理，异常值按默认值处理。 | 53| [shadowColor](#shadowcolor) | 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-1) | 否 | 否 | 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'：给图像设置高斯模糊<br/>- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗<br/>- 'contrast'：调整图像的对比度<br/>- 'grayscale'：将图像转换为灰度图像<br/>- 'hue-rotate'：给图像应用色相旋转<br/>- 'invert'：反转输入图像<br/>- 'opacity'：转化图像的透明程度<br/>- 'saturate'：转换图像饱和度<br/>- 'sepia'：将图像转换为深褐色<br/>默认值：'none'。 | 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('#ffff00') 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('#ffff00') 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(255,0,0)' 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('#ffff00') 663 .onReady(() =>{ 664 let offContext = this.offCanvas.getContext("2d", this.settings) 665 offContext.shadowBlur = 30 666 offContext.shadowColor = 'rgb(0,0,255)' 667 offContext.fillStyle = 'rgb(255,0,0)' 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. 885Center }) { 886 Canvas(this.context) 887 .width('100%') 888 .height('100%') 889 .backgroundColor('#ffff00') 890 .onReady(() =>{ 891 let offContext = this.offCanvas.getContext("2d", this.settings) 892 let offctx = offContext 893 let img = this.img 894 895 offctx.drawImage(img, 0, 0, 100, 100); 896 897 offctx.filter = 'grayscale(50%)'; 898 offctx.drawImage(img, 100, 0, 100, 100); 899 900 offctx.filter = 'sepia(60%)'; 901 offctx.drawImage(img, 200, 0, 100, 100); 902 903 offctx.filter = 'saturate(30%)'; 904 offctx.drawImage(img, 0, 100, 100, 100); 905 906 offctx.filter = 'hue-rotate(90degree)'; 907 offctx.drawImage(img, 100, 100, 100, 100); 908 909 offctx.filter = 'invert(100%)'; 910 offctx.drawImage(img, 200, 100, 100, 100); 911 912 offctx.filter = 'opacity(25%)'; 913 offctx.drawImage(img, 0, 200, 100, 100); 914 915 offctx.filter = 'brightness(0.4)'; 916 offctx.drawImage(img, 100, 200, 100, 100); 917 918 offctx.filter = 'contrast(200%)'; 919 offctx.drawImage(img, 200, 200, 100, 100); 920 921 offctx.filter = 'blur(5px)'; 922 offctx.drawImage(img, 0, 300, 100, 100); 923 924 let image = this.offCanvas.transferToImageBitmap() 925 this.context.transferFromImageBitmap(image) 926 }) 927 } 928 .width('100%') 929 .height('100%') 930 } 931 } 932``` 933 934 935 936## 方法 937 938 939### fillRect 940 941fillRect(x: number, y: number, w: number, h: number): void 942 943填充一个矩形。 944 945**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 946 947**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 948 949**系统能力：** SystemCapability.ArkUI.ArkUI.Full 950 951 **参数：** 952 953| 参数名 | 类型 | 必填 | 说明 | 954| ------ | ------ | ---- | ------------- | 955| x | number | 是 | 指定矩形左上角点的x坐标。<br>默认单位：vp。 | 956| y | number | 是 | 指定矩形左上角点的y坐标。<br>默认单位：vp。 | 957| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 958| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 959 960 **示例：** 961 962 ```ts 963 // xxx.ets 964 @Entry 965 @Component 966 struct FillRect { 967 private settings: RenderingContextSettings = new RenderingContextSettings(true) 968 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 969 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 970 971 build() { 972 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 973 Canvas(this.context) 974 .width('100%') 975 .height('100%') 976 .backgroundColor('#ffff00') 977 .onReady(() =>{ 978 let offContext = this.offCanvas.getContext("2d", this.settings) 979 offContext.fillRect(30,30,100,100) 980 let image = this.offCanvas.transferToImageBitmap() 981 this.context.transferFromImageBitmap(image) 982 }) 983 } 984 .width('100%') 985 .height('100%') 986 } 987 } 988 ``` 989 990  991 992 993### strokeRect 994 995strokeRect(x: number, y: number, w: number, h: number): void 996 997绘制具有边框的矩形，矩形内部不填充。 998 999**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1000 1001**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1002 1003**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1004 1005 **参数：** 1006 1007| 参数名 | 类型 | 必填 | 说明 | 1008| ------ | ------ | ---- | ------------ | 1009| x | number | 是 | 指定矩形的左上角x坐标。<br>默认单位：vp。 | 1010| y | number | 是 | 指定矩形的左上角y坐标。<br>默认单位：vp。 | 1011| width | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1012| height | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1013 1014 **示例：** 1015 1016 ```ts 1017 // xxx.ets 1018 @Entry 1019 @Component 1020 struct StrokeRect { 1021 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1022 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1023 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1024 1025 build() { 1026 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1027 Canvas(this.context) 1028 .width('100%') 1029 .height('100%') 1030 .backgroundColor('#ffff00') 1031 .onReady(() =>{ 1032 let offContext = this.offCanvas.getContext("2d", this.settings) 1033 offContext.strokeRect(30, 30, 200, 150) 1034 let image = this.offCanvas.transferToImageBitmap() 1035 this.context.transferFromImageBitmap(image) 1036 }) 1037 } 1038 .width('100%') 1039 .height('100%') 1040 } 1041 } 1042 ``` 1043 1044  1045 1046 1047### clearRect 1048 1049clearRect(x: number, y: number, w: number, h: number): void 1050 1051删除指定区域内的绘制内容。 1052 1053**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1054 1055**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1056 1057**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1058 1059 **参数：** 1060 1061| 参数名 | 类型 | 必填 | 说明 | 1062| ------ | ------ | ---- | ------------- | 1063| x | number | 是 | 指定矩形上的左上角x坐标。<br>默认单位：vp。 | 1064| y | number | 是 | 指定矩形上的左上角y坐标。<br>默认单位：vp。 | 1065| width | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1066| height | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1067 1068 **示例：** 1069 1070 ```ts 1071 // xxx.ets 1072 @Entry 1073 @Component 1074 struct ClearRect { 1075 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1076 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1077 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1078 1079 build() { 1080 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1081 Canvas(this.context) 1082 .width('100%') 1083 .height('100%') 1084 .backgroundColor('#ffff00') 1085 .onReady(() =>{ 1086 let offContext = this.offCanvas.getContext("2d", this.settings) 1087 offContext.fillStyle = 'rgb(0,0,255)' 1088 offContext.fillRect(20,20,200,200) 1089 offContext.clearRect(30,30,150,100) 1090 let image = this.offCanvas.transferToImageBitmap() 1091 this.context.transferFromImageBitmap(image) 1092 }) 1093 } 1094 .width('100%') 1095 .height('100%') 1096 } 1097 } 1098 ``` 1099 1100  1101 1102 1103### fillText 1104 1105fillText(text: string, x: number, y: number, maxWidth?: number): void 1106 1107绘制填充类文本。 1108 1109**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1110 1111**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1112 1113**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1114 1115**参数：** 1116 1117| 参数名 | 类型 | 必填 | 说明 | 1118| -------- | ------ | ---- | --------------- | 1119| text | string | 是 | 需要绘制的文本内容。 | 1120| x | number | 是 | 需要绘制的文本的左下角x坐标。<br>默认单位：vp。 | 1121| y | number | 是 | 需要绘制的文本的左下角y坐标。<br>默认单位：vp。 | 1122| maxWidth | number | 否 | 指定文本允许的最大宽度。<br>默认单位：vp。<br>默认值：不限制宽度。 | 1123 1124 **示例：** 1125 1126 ```ts 1127 // xxx.ets 1128 @Entry 1129 @Component 1130 struct FillText { 1131 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1132 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1133 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1134 1135 build() { 1136 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1137 Canvas(this.context) 1138 .width('100%') 1139 .height('100%') 1140 .backgroundColor('#ffff00') 1141 .onReady(() =>{ 1142 let offContext = this.offCanvas.getContext("2d", this.settings) 1143 offContext.font = '30px sans-serif' 1144 offContext.fillText("Hello World!", 20, 100) 1145 let image = this.offCanvas.transferToImageBitmap() 1146 this.context.transferFromImageBitmap(image) 1147 }) 1148 } 1149 .width('100%') 1150 .height('100%') 1151 } 1152 } 1153 ``` 1154 1155  1156 1157 1158### strokeText 1159 1160strokeText(text: string, x: number, y: number, maxWidth?: number): void 1161 1162绘制描边类文本。 1163 1164**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1165 1166**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1167 1168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1169 1170**参数：** 1171 1172| 参数名 | 类型 | 必填 | 说明 | 1173| -------- | ------ | ---- | --------------- | 1174| text | string | 是 | 需要绘制的文本内容。 | 1175| x | number | 是 | 需要绘制的文本的左下角x坐标。<br>默认单位：vp。 | 1176| y | number | 是 | 需要绘制的文本的左下角y坐标。<br>默认单位：vp。 | 1177| maxWidth | number | 否 | 需要绘制的文本的最大宽度。<br>默认单位：vp。<br>默认值：不限制宽度。 | 1178 1179 **示例：** 1180 1181 ```ts 1182 // xxx.ets 1183 @Entry 1184 @Component 1185 struct StrokeText { 1186 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1187 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1188 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1189 1190 build() { 1191 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1192 Canvas(this.context) 1193 .width('100%') 1194 .height('100%') 1195 .backgroundColor('#ffff00') 1196 .onReady(() =>{ 1197 let offContext = this.offCanvas.getContext("2d", this.settings) 1198 offContext.font = '55px sans-serif' 1199 offContext.strokeText("Hello World!", 20, 60) 1200 let image = this.offCanvas.transferToImageBitmap() 1201 this.context.transferFromImageBitmap(image) 1202 }) 1203 } 1204 .width('100%') 1205 .height('100%') 1206 } 1207 } 1208 ``` 1209 1210  1211 1212 1213### measureText 1214 1215measureText(text: string): TextMetrics 1216 1217该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 1218 1219**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1220 1221**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1222 1223**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1224 1225 **参数：** 1226 1227| 参数名 | 类型 | 必填 | 说明 | 1228| ---- | ------ | ---- | ---------- | 1229| text | string | 是 | 需要进行测量的文本。 | 1230 1231 **返回值：** 1232 1233| 类型 | 说明 | 1234| ----------- | ---------------------------------------- | 1235| [TextMetrics](ts-canvasrenderingcontext2d.md#textmetrics) | 文本的尺寸信息。 | 1236 1237 **示例：** 1238 1239 ```ts 1240 // xxx.ets 1241 @Entry 1242 @Component 1243 struct MeasureText { 1244 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1245 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1246 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1247 1248 build() { 1249 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1250 Canvas(this.context) 1251 .width('100%') 1252 .height('100%') 1253 .backgroundColor('#ffff00') 1254 .onReady(() =>{ 1255 let offContext = this.offCanvas.getContext("2d", this.settings) 1256 offContext.font = '50px sans-serif' 1257 offContext.fillText("Hello World!", 20, 100) 1258 offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200) 1259 let image = this.offCanvas.transferToImageBitmap() 1260 this.context.transferFromImageBitmap(image) 1261 }) 1262 } 1263 .width('100%') 1264 .height('100%') 1265 } 1266 } 1267 ``` 1268 1269  1270 1271 1272### stroke 1273 1274stroke(): void 1275 1276根据当前的路径，进行边框绘制操作。 1277 1278**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1279 1280**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1281 1282**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1283 1284**示例：** 1285 1286 ```ts 1287 // xxx.ets 1288 @Entry 1289 @Component 1290 struct Stroke { 1291 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1292 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1293 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1294 1295 build() { 1296 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1297 Canvas(this.context) 1298 .width('100%') 1299 .height('100%') 1300 .backgroundColor('#ffff00') 1301 .onReady(() => { 1302 let offContext = this.offCanvas.getContext("2d", this.settings) 1303 offContext.moveTo(125, 25) 1304 offContext.lineTo(125, 105) 1305 offContext.lineTo(175, 105) 1306 offContext.lineTo(175, 25) 1307 offContext.strokeStyle = 'rgb(255,0,0)' 1308 offContext.stroke() 1309 let image = this.offCanvas.transferToImageBitmap() 1310 this.context.transferFromImageBitmap(image) 1311 }) 1312 } 1313 .width('100%') 1314 .height('100%') 1315 } 1316 } 1317 ``` 1318 1319  1320 1321stroke(path: Path2D): void 1322 1323根据指定的路径，进行边框绘制操作。 1324 1325**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1326 1327**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1328 1329**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1330 1331 **参数：** 1332 1333| 参数名 | 类型 | 必填 | 说明 | 1334| ---- | ---------------------------------------- | ---- | ------------ | 1335| path | [Path2D](ts-components-canvas-path2d.md) | 是 | 需要绘制的Path2D。 | 1336 1337 **示例：** 1338 1339 ```ts 1340 // xxx.ets 1341 @Entry 1342 @Component 1343 struct Stroke { 1344 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1345 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1346 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1347 private path2Da: Path2D = new Path2D() 1348 1349 build() { 1350 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1351 Canvas(this.context) 1352 .width('100%') 1353 .height('100%') 1354 .backgroundColor('#ffff00') 1355 .onReady(() => { 1356 let offContext = this.offCanvas.getContext("2d", this.settings) 1357 this.path2Da.moveTo(25, 25) 1358 this.path2Da.lineTo(25, 105) 1359 this.path2Da.lineTo(75, 105) 1360 this.path2Da.lineTo(75, 25) 1361 offContext.strokeStyle = 'rgb(0,0,255)' 1362 offContext.stroke(this.path2Da) 1363 let image = this.offCanvas.transferToImageBitmap() 1364 this.context.transferFromImageBitmap(image) 1365 }) 1366 } 1367 .width('100%') 1368 .height('100%') 1369 } 1370 } 1371 ``` 1372 1373  1374 1375 1376### beginPath 1377 1378beginPath(): void 1379 1380创建一个新的绘制路径。 1381 1382**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1383 1384**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1385 1386**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1387 1388 **示例：** 1389 1390 ```ts 1391 // xxx.ets 1392 @Entry 1393 @Component 1394 struct BeginPath { 1395 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1396 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1397 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1398 1399 build() { 1400 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1401 Canvas(this.context) 1402 .width('100%') 1403 .height('100%') 1404 .backgroundColor('#ffff00') 1405 .onReady(() =>{ 1406 let offContext = this.offCanvas.getContext("2d", this.settings) 1407 offContext.beginPath() 1408 offContext.lineWidth = 6 1409 offContext.strokeStyle = '#0000ff' 1410 offContext.moveTo(15, 80) 1411 offContext.lineTo(280, 160) 1412 offContext.stroke() 1413 let image = this.offCanvas.transferToImageBitmap() 1414 this.context.transferFromImageBitmap(image) 1415 }) 1416 } 1417 .width('100%') 1418 .height('100%') 1419 } 1420 } 1421 ``` 1422 1423  1424 1425 1426### moveTo 1427 1428moveTo(x: number, y: number): void 1429 1430路径从当前点移动到指定点。 1431 1432**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1433 1434**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1435 1436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1437 1438 **参数：** 1439 1440| 参数名 | 类型 | 必填 | 说明 | 1441| ---- | ------ | ---- | --------- | 1442| x | number | 是 | 指定位置的x坐标。<br>默认单位：vp。 | 1443| y | number | 是 | 指定位置的y坐标。<br>默认单位：vp。 | 1444 1445 **示例：** 1446 1447 ```ts 1448 // xxx.ets 1449 @Entry 1450 @Component 1451 struct MoveTo { 1452 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1453 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1454 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1455 1456 build() { 1457 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1458 Canvas(this.context) 1459 .width('100%') 1460 .height('100%') 1461 .backgroundColor('#ffff00') 1462 .onReady(() =>{ 1463 let offContext = this.offCanvas.getContext("2d", this.settings) 1464 offContext.beginPath() 1465 offContext.moveTo(10, 10) 1466 offContext.lineTo(280, 160) 1467 offContext.stroke() 1468 let image = this.offCanvas.transferToImageBitmap() 1469 this.context.transferFromImageBitmap(image) 1470 }) 1471 } 1472 .width('100%') 1473 .height('100%') 1474 } 1475 } 1476 ``` 1477 1478  1479 1480 1481### lineTo 1482 1483lineTo(x: number, y: number): void 1484 1485从当前点到指定点进行路径连接。 1486 1487**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1488 1489**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1490 1491**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1492 1493 **参数：** 1494 1495| 参数名 | 类型 | 必填 | 描述 | 1496| ---- | ------ | ---- | --------- | 1497| x | number | 是 | 指定位置的x坐标。<br>默认单位：vp。 | 1498| y | number | 是 | 指定位置的y坐标。<br>默认单位：vp。 | 1499 1500 **示例：** 1501 1502 ```ts 1503 // xxx.ets 1504 @Entry 1505 @Component 1506 struct LineTo { 1507 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1508 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1509 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1510 1511 build() { 1512 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1513 Canvas(this.context) 1514 .width('100%') 1515 .height('100%') 1516 .backgroundColor('#ffff00') 1517 .onReady(() =>{ 1518 let offContext = this.offCanvas.getContext("2d", this.settings) 1519 offContext.beginPath() 1520 offContext.moveTo(10, 10) 1521 offContext.lineTo(280, 160) 1522 offContext.stroke() 1523 let image = this.offCanvas.transferToImageBitmap() 1524 this.context.transferFromImageBitmap(image) 1525 }) 1526 } 1527 .width('100%') 1528 .height('100%') 1529 } 1530 } 1531 ``` 1532 1533  1534 1535 1536### closePath 1537 1538closePath(): void 1539 1540结束当前路径形成一个封闭路径。 1541 1542**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1543 1544**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1545 1546**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1547 1548 **示例：** 1549 1550 ```ts 1551 // xxx.ets 1552 @Entry 1553 @Component 1554 struct ClosePath { 1555 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1556 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1557 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1558 1559 build() { 1560 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1561 Canvas(this.context) 1562 .width('100%') 1563 .height('100%') 1564 .backgroundColor('#ffff00') 1565 .onReady(() =>{ 1566 let offContext = this.offCanvas.getContext("2d", this.settings) 1567 offContext.beginPath() 1568 offContext.moveTo(30, 30) 1569 offContext.lineTo(110, 30) 1570 offContext.lineTo(70, 90) 1571 offContext.closePath() 1572 offContext.stroke() 1573 let image = this.offCanvas.transferToImageBitmap() 1574 this.context.transferFromImageBitmap(image) 1575 }) 1576 } 1577 .width('100%') 1578 .height('100%') 1579 } 1580 } 1581 ``` 1582 1583  1584 1585 1586### createPattern 1587 1588createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 1589 1590通过指定图像和重复方式创建图片填充的模板。 1591 1592**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1593 1594**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1595 1596**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1597 1598**参数：** 1599 1600| 参数名 | 类型 | 必填 | 说明 | 1601| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 1602| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象，具体参考ImageBitmap对象。 | 1603| repetition | string \| null | 是 | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'、'clamp'、'mirror'。 | 1604 1605**返回值：** 1606 1607| 类型 | 说明 | 1608| ---------------------------------------- | ----------------------- | 1609| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) \| null | 通过指定图像和重复方式创建图片填充的模板对象。 | 1610 1611 **示例：** 1612 1613 ```ts 1614 // xxx.ets 1615 @Entry 1616 @Component 1617 struct CreatePattern { 1618 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1619 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1620 private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") 1621 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1622 1623 build() { 1624 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1625 Canvas(this.context) 1626 .width('100%') 1627 .height('100%') 1628 .backgroundColor('#ffff00') 1629 .onReady(() =>{ 1630 let offContext = this.offCanvas.getContext("2d", this.settings) 1631 let pattern = offContext.createPattern(this.img, 'repeat') 1632 offContext.fillStyle = pattern as CanvasPattern 1633 offContext.fillRect(0, 0, 200, 200) 1634 let image = this.offCanvas.transferToImageBitmap() 1635 this.context.transferFromImageBitmap(image) 1636 }) 1637 } 1638 .width('100%') 1639 .height('100%') 1640 } 1641 } 1642 ``` 1643 1644  1645 1646 1647### bezierCurveTo 1648 1649bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1650 1651创建三次贝赛尔曲线的路径。 1652 1653**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1654 1655**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1656 1657**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1658 1659 **参数：** 1660 1661| 参数名 | 类型 | 必填 | 说明 | 1662| ---- | ------ | ---- | -------------- | 1663| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1664| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1665| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1666| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1667| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 1668| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 1669 1670 **示例：** 1671 1672 ```ts 1673 // xxx.ets 1674 @Entry 1675 @Component 1676 struct BezierCurveTo { 1677 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1678 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1679 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1680 1681 build() { 1682 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1683 Canvas(this.context) 1684 .width('100%') 1685 .height('100%') 1686 .backgroundColor('#ffff00') 1687 .onReady(() =>{ 1688 let offContext = this.offCanvas.getContext("2d", this.settings) 1689 offContext.beginPath() 1690 offContext.moveTo(10, 10) 1691 offContext.bezierCurveTo(20, 100, 200, 100, 200, 20) 1692 offContext.stroke() 1693 let image = this.offCanvas.transferToImageBitmap() 1694 this.context.transferFromImageBitmap(image) 1695 }) 1696 } 1697 .width('100%') 1698 .height('100%') 1699 } 1700 } 1701 ``` 1702 1703  1704 1705 1706### quadraticCurveTo 1707 1708quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1709 1710创建二次贝赛尔曲线的路径。 1711 1712**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1713 1714**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1715 1716**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1717 1718 **参数：** 1719 1720| 参数名 | 类型 | 必填 | 说明 | 1721| ---- | ------ | ---- | -------------- | 1722| cpx | number | 是 | 贝塞尔参数的x坐标值。<br>默认单位：vp。 | 1723| cpy | number | 是 | 贝塞尔参数的y坐标值。<br>默认单位：vp。 | 1724| x | number | 是 | 路径结束时的x坐标值。<br>默认单位：vp。 | 1725| y | number | 是 | 路径结束时的y坐标值。<br>默认单位：vp。 | 1726 1727 **示例：** 1728 1729 ```ts 1730 // xxx.ets 1731 @Entry 1732 @Component 1733 struct QuadraticCurveTo { 1734 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1735 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1736 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1737 1738 build() { 1739 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1740 Canvas(this.context) 1741 .width('100%') 1742 .height('100%') 1743 .backgroundColor('#ffff00') 1744 .onReady(() =>{ 1745 let offContext = this.offCanvas.getContext("2d", this.settings) 1746 offContext.beginPath() 1747 offContext.moveTo(20, 20) 1748 offContext.quadraticCurveTo(100, 100, 200, 20) 1749 offContext.stroke() 1750 let image = this.offCanvas.transferToImageBitmap() 1751 this.context.transferFromImageBitmap(image) 1752 }) 1753 } 1754 .width('100%') 1755 .height('100%') 1756 } 1757 } 1758 ``` 1759 1760  1761 1762 1763### arc 1764 1765arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1766 1767绘制弧线路径。 1768 1769**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1770 1771**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1772 1773**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1774 1775 **参数：** 1776 1777| 参数名 | 类型 | 必填 | 说明 | 1778| ---------------- | ------- | ---- | ---------- | 1779| x | number | 是 | 弧线圆心的x坐标值。<br>默认单位：vp。 | 1780| y | number | 是 | 弧线圆心的y坐标值。<br>默认单位：vp。 | 1781| radius | number | 是 | 弧线的圆半径。<br>默认单位：vp。 | 1782| startAngle | number | 是 | 弧线的起始弧度。<br>默认单位：弧度。 | 1783| endAngle | number | 是 | 弧线的终止弧度。<br>默认单位：弧度。 | 1784| counterclockwise | boolean | 否 | 是否逆时针绘制圆弧。<br>默认值：false。 | 1785 1786 **示例：** 1787 1788 ```ts 1789 // xxx.ets 1790 @Entry 1791 @Component 1792 struct Arc { 1793 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1794 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1795 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1796 1797 build() { 1798 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1799 Canvas(this.context) 1800 .width('100%') 1801 .height('100%') 1802 .backgroundColor('#ffff00') 1803 .onReady(() =>{ 1804 let offContext = this.offCanvas.getContext("2d", this.settings) 1805 offContext.beginPath() 1806 offContext.arc(100, 75, 50, 0, 6.28) 1807 offContext.stroke() 1808 let image = this.offCanvas.transferToImageBitmap() 1809 this.context.transferFromImageBitmap(image) 1810 }) 1811 } 1812 .width('100%') 1813 .height('100%') 1814 } 1815 } 1816 ``` 1817 1818  1819 1820 1821### arcTo 1822 1823arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1824 1825依据给定的控制点和圆弧半径创建圆弧路径。 1826 1827**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1828 1829**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1830 1831**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1832 1833 **参数：** 1834 1835| 参数名 | 类型 | 必填 | 说明 | 1836| ------ | ------ | ---- | --------------- | 1837| x1 | number | 是 | 第一个控制点的x坐标值。<br>默认单位：vp。 | 1838| y1 | number | 是 | 第一个控制点的y坐标值。<br>默认单位：vp。 | 1839| x2 | number | 是 | 第二个控制点的x坐标值。<br>默认单位：vp。 | 1840| y2 | number | 是 | 第二个控制点的y坐标值。<br>默认单位：vp。 | 1841| radius | number | 是 | 圆弧的圆半径值。<br>默认单位：vp。 | 1842 1843 **示例：** 1844 1845 ```ts 1846 // xxx.ets 1847 @Entry 1848 @Component 1849 struct ArcTo { 1850 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1851 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1852 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1853 1854 build() { 1855 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1856 Canvas(this.context) 1857 .width('100%') 1858 .height('100%') 1859 .backgroundColor('#ffff00') 1860 .onReady(() =>{ 1861 let offContext = this.offCanvas.getContext("2d", this.settings) 1862 1863 // 切线 1864 offContext.beginPath() 1865 offContext.strokeStyle = '#808080' 1866 offContext.lineWidth = 1.5; 1867 offContext.moveTo(360, 20); 1868 offContext.lineTo(360, 170); 1869 offContext.lineTo(110, 170); 1870 offContext.stroke(); 1871 1872 // 圆弧 1873 offContext.beginPath() 1874 offContext.strokeStyle = '#000000' 1875 offContext.lineWidth = 3; 1876 offContext.moveTo(360, 20) 1877 offContext.arcTo(360, 170, 110, 170, 150) 1878 offContext.stroke() 1879 1880 // 起始点 1881 offContext.beginPath(); 1882 offContext.fillStyle = '#00ff00'; 1883 offContext.arc(360, 20, 4, 0, 2 * Math.PI); 1884 offContext.fill(); 1885 1886 // 控制点 1887 offContext.beginPath(); 1888 offContext.fillStyle = '#ff0000'; 1889 offContext.arc(360, 170, 4, 0, 2 * Math.PI); 1890 offContext.arc(110, 170, 4, 0, 2 * Math.PI); 1891 offContext.fill(); 1892 1893 let image = this.offCanvas.transferToImageBitmap() 1894 this.context.transferFromImageBitmap(image) 1895 }) 1896 } 1897 .width('100%') 1898 .height('100%') 1899 } 1900 } 1901 ``` 1902 1903  1904 1905 > 此示例中，arcTo()创建的圆弧为黑色，圆弧的两条切线为灰色。控制点为红色，起始点为绿色。 1906 > 1907 > 可以想象两条切线：一条切线从起始点到第一个控制点，另一条切线从第一个控制点到第二个控制点。arcTo()在这两条切线间创建一个圆弧，并使圆弧与这两条切线都相切。 1908 1909 1910### ellipse 1911 1912ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 1913 1914在规定的矩形区域绘制一个椭圆。 1915 1916**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1917 1918**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1919 1920**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1921 1922 **参数：** 1923 1924| 参数名 | 类型 | 必填 | 说明 | 1925| ---------------- | ------- | ---- | ---------------------------------------- | 1926| x | number | 是 | 椭圆圆心的x轴坐标。<br>默认单位：vp。 | 1927| y | number | 是 | 椭圆圆心的y轴坐标。<br>默认单位：vp。 | 1928| radiusX | number | 是 | 椭圆x轴的半径长度。<br>默认单位：vp。 | 1929| radiusY | number | 是 | 椭圆y轴的半径长度。<br>默认单位：vp。 | 1930| rotation | number | 是 | 椭圆的旋转角度。<br>单位为弧度。 | 1931| startAngle | number | 是 | 椭圆绘制的起始点角度。<br>单位为弧度。 | 1932| endAngle | number | 是 | 椭圆绘制的结束点角度。<br>单位为弧度。 | 1933| counterclockwise | boolean | 否 | 是否以逆时针方向绘制椭圆。<br>true:逆时针方向绘制椭圆。<br>false:顺时针方向绘制椭圆。<br>默认值：false。 | 1934 1935 **示例：** 1936 1937 ```ts 1938 // xxx.ets 1939 @Entry 1940 @Component 1941 struct CanvasExample { 1942 private settings: RenderingContextSettings = new RenderingContextSettings(true) 1943 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 1944 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 1945 build() { 1946 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 1947 Canvas(this.context) 1948 .width('100%') 1949 .height('100%') 1950 .backgroundColor('#ffff00') 1951 .onReady(() =>{ 1952 let offContext = this.offCanvas.getContext("2d", this.settings) 1953 offContext.beginPath() 1954 offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, false) 1955 offContext.stroke() 1956 offContext.beginPath() 1957 offContext.ellipse(200, 300, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2, true) 1958 offContext.stroke() 1959 let image = this.offCanvas.transferToImageBitmap() 1960 this.context.transferFromImageBitmap(image) 1961 }) 1962 } 1963 .width('100%') 1964 .height('100%') 1965 } 1966 } 1967 ``` 1968 1969  1970 1971 1972### rect 1973 1974rect(x: number, y: number, w: number, h: number): void 1975 1976创建矩形路径。 1977 1978**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 1979 1980**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1981 1982**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1983 1984 **参数：** 1985 1986| 参数名 | 类型 | 必填 | 说明 | 1987| ---- | ------ | ---- | ------------- | 1988| x | number | 是 | 指定矩形的左上角x坐标值。<br>默认单位：vp。 | 1989| y | number | 是 | 指定矩形的左上角y坐标值。<br>默认单位：vp。 | 1990| w | number | 是 | 指定矩形的宽度。<br>默认单位：vp。 | 1991| h | number | 是 | 指定矩形的高度。<br>默认单位：vp。 | 1992 1993 **示例：** 1994 1995 ```ts 1996 // xxx.ets 1997 @Entry 1998 @Component 1999 struct CanvasExample { 2000 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2001 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2002 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2003 2004 build() { 2005 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2006 Canvas(this.context) 2007 .width('100%') 2008 .height('100%') 2009 .backgroundColor('#ffff00') 2010 .onReady(() =>{ 2011 let offContext = this.offCanvas.getContext("2d", this.settings) 2012 offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2013 offContext.stroke() 2014 let image = this.offCanvas.transferToImageBitmap() 2015 this.context.transferFromImageBitmap(image) 2016 }) 2017 } 2018 .width('100%') 2019 .height('100%') 2020 } 2021 } 2022 ``` 2023 2024  2025 2026 2027### fill 2028 2029fill(fillRule?: CanvasFillRule): void 2030 2031对封闭路径进行填充。 2032 2033**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2034 2035**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2036 2037**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2038 2039**参数:** 2040 2041| 参数名 | 类型 | 必填 | 说明 | 2042| -------- | -------------- | ---- | ---------------------------------------- | 2043| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2044 2045 ```ts 2046 // xxx.ets 2047 @Entry 2048 @Component 2049 struct Fill { 2050 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2051 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2052 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2053 2054 build() { 2055 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2056 Canvas(this.context) 2057 .width('100%') 2058 .height('100%') 2059 .backgroundColor('#ffff00') 2060 .onReady(() =>{ 2061 let offContext = this.offCanvas.getContext("2d", this.settings) 2062 offContext.fillStyle = '#000000' 2063 offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20) 2064 offContext.fill() 2065 let image = this.offCanvas.transferToImageBitmap() 2066 this.context.transferFromImageBitmap(image) 2067 }) 2068 } 2069 .width('100%') 2070 .height('100%') 2071 } 2072 } 2073 ``` 2074 2075  2076 2077 2078fill(path: Path2D, fillRule?: CanvasFillRule): void 2079 2080对封闭路径进行填充。 2081 2082**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2083 2084**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2085 2086**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2087 2088**参数:** 2089 2090| 参数名 | 类型 | 必填 | 说明 | 2091| -------- | -------------- | ---- | ----------------- | 2092| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D填充路径。 | 2093| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2094 2095**示例:** 2096 2097```ts 2098// xxx.ets 2099@Entry 2100@Component 2101struct Fill { 2102 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2103 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2104 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2105 2106 build() { 2107 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2108 Canvas(this.context) 2109 .width('100%') 2110 .height('100%') 2111 .backgroundColor('#ffff00') 2112 .onReady(() =>{ 2113 let offContext = this.offCanvas.getContext("2d", this.settings) 2114 let region = new Path2D() 2115 region.moveTo(30, 90) 2116 region.lineTo(110, 20) 2117 region.lineTo(240, 130) 2118 region.lineTo(60, 130) 2119 region.lineTo(190, 20) 2120 region.lineTo(270, 90) 2121 region.closePath() 2122 // Fill path 2123 offContext.fillStyle = '#00ff00' 2124 offContext.fill(region, "evenodd") 2125 let image = this.offCanvas.transferToImageBitmap() 2126 this.context.transferFromImageBitmap(image) 2127 }) 2128 } 2129 .width('100%') 2130 .height('100%') 2131 } 2132} 2133``` 2134 2135  2136 2137 2138 2139### clip 2140 2141clip(fillRule?: CanvasFillRule): void 2142 2143设置当前路径为剪切路径。 2144 2145**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2146 2147**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2148 2149**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2150 2151**参数:** 2152 2153| 参数名 | 类型 | 必填 | 说明 | 2154| -------- | -------------- | ---- | ---------------------------------------- | 2155| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2156 2157 **示例：** 2158 2159 ```ts 2160 // xxx.ets 2161 @Entry 2162 @Component 2163 struct Clip { 2164 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2165 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2166 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2167 2168 build() { 2169 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2170 Canvas(this.context) 2171 .width('100%') 2172 .height('100%') 2173 .backgroundColor('#ffff00') 2174 .onReady(() =>{ 2175 let offContext = this.offCanvas.getContext("2d", this.settings) 2176 offContext.rect(0, 0, 100, 200) 2177 offContext.stroke() 2178 offContext.clip() 2179 offContext.fillStyle = "rgb(255,0,0)" 2180 offContext.fillRect(0, 0, 200, 200) 2181 let image = this.offCanvas.transferToImageBitmap() 2182 this.context.transferFromImageBitmap(image) 2183 }) 2184 } 2185 .width('100%') 2186 .height('100%') 2187 } 2188 } 2189 ``` 2190 2191  2192 2193 2194clip(path: Path2D, fillRule?: CanvasFillRule): void 2195 2196设置封闭路径为剪切路径。 2197 2198**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2199 2200**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2201 2202**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2203 2204**参数:** 2205 2206| 参数名 | 类型 | 必填 | 描述 | 2207| -------- | -------------- | ---- | ---------------------------------------- | 2208| path | [Path2D](ts-components-canvas-path2d.md) | 是 | Path2D剪切路径。 | 2209| fillRule | [CanvasFillRule](ts-canvasrenderingcontext2d.md#canvasfillrule) | 否 | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。<br>默认值："nonzero"。 | 2210 2211 **示例：** 2212 2213 ```ts 2214 // xxx.ets 2215 @Entry 2216 @Component 2217 struct Clip { 2218 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2219 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2220 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2221 2222 build() { 2223 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2224 Canvas(this.context) 2225 .width('100%') 2226 .height('100%') 2227 .backgroundColor('#ffff00') 2228 .onReady(() =>{ 2229 let offContext = this.offCanvas.getContext("2d", this.settings) 2230 let region = new Path2D() 2231 region.moveTo(30, 90) 2232 region.lineTo(110, 20) 2233 region.lineTo(240, 130) 2234 region.lineTo(60, 130) 2235 region.lineTo(190, 20) 2236 region.lineTo(270, 90) 2237 region.closePath() 2238 offContext.clip(region,"evenodd") 2239 offContext.fillStyle = "rgb(0,255,0)" 2240 offContext.fillRect(0, 0, 600, 600) 2241 let image = this.offCanvas.transferToImageBitmap() 2242 this.context.transferFromImageBitmap(image) 2243 }) 2244 } 2245 .width('100%') 2246 .height('100%') 2247 } 2248 } 2249 ``` 2250 2251  2252 2253 2254### reset<sup>12+</sup> 2255 2256reset(): void 2257 2258将OffscreenCanvasRenderingContext2D重置为其默认状态，清除后台缓冲区、绘制状态栈、绘制路径和样式。 2259 2260**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2261 2262**示例：** 2263 2264 ```ts 2265 // xxx.ets 2266 @Entry 2267 @Component 2268 struct Reset { 2269 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2270 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2271 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2272 2273 build() { 2274 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2275 Canvas(this.context) 2276 .width('100%') 2277 .height('100%') 2278 .backgroundColor('#ffff00') 2279 .onReady(() =>{ 2280 let offContext = this.offCanvas.getContext("2d", this.settings) 2281 offContext.fillStyle = '#0000ff' 2282 offContext.fillRect(20, 20, 150, 100) 2283 offContext.reset() 2284 offContext.fillRect(20, 150, 150, 100) 2285 let image = this.offCanvas.transferToImageBitmap() 2286 this.context.transferFromImageBitmap(image) 2287 }) 2288 } 2289 .width('100%') 2290 .height('100%') 2291 } 2292 } 2293 ``` 2294 2295  2296 2297### saveLayer<sup>12+</sup> 2298 2299saveLayer(): void 2300 2301创建一个图层。 2302 2303**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2304 2305**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2306 2307**示例：** 2308 2309 ```ts 2310 // xxx.ets 2311 @Entry 2312 @Component 2313 struct saveLayer { 2314 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2315 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2316 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2317 2318 build() { 2319 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2320 Canvas(this.context) 2321 .width('100%') 2322 .height('100%') 2323 .backgroundColor('#ffff00') 2324 .onReady(() => { 2325 let offContext = this.offCanvas.getContext("2d", this.settings) 2326 offContext.fillStyle = "#0000ff" 2327 offContext.fillRect(50,100,300,100) 2328 offContext.fillStyle = "#00ffff" 2329 offContext.fillRect(50,150,300,100) 2330 offContext.globalCompositeOperation = 'destination-over' 2331 offContext.saveLayer() 2332 offContext.globalCompositeOperation = 'source-over' 2333 offContext.fillStyle = "#ff0000" 2334 offContext.fillRect(100,50,100,300) 2335 offContext.fillStyle = "#00ff00" 2336 offContext.fillRect(150,50,100,300) 2337 offContext.restoreLayer() 2338 let image = this.offCanvas.transferToImageBitmap() 2339 this.context.transferFromImageBitmap(image) 2340 }) 2341 } 2342 .width('100%') 2343 .height('100%') 2344 } 2345 } 2346 ``` 2347  2348 2349### restoreLayer<sup>12+</sup> 2350 2351restoreLayer(): void 2352 2353恢复图像变换和裁剪状态至saveLayer前的状态，并将图层绘制在canvas上。restoreLayer示例同saveLayer。 2354 2355**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 2356 2357**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2358 2359### resetTransform 2360 2361resetTransform(): void 2362 2363使用单位矩阵重新设置当前矩阵。 2364 2365**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2366 2367**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2368 2369**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2370 2371**示例：** 2372 2373 ```ts 2374 // xxx.ets 2375 @Entry 2376 @Component 2377 struct ResetTransform { 2378 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2379 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2380 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2381 2382 build() { 2383 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2384 Canvas(this.context) 2385 .width('100%') 2386 .height('100%') 2387 .backgroundColor('#ffff00') 2388 .onReady(() => { 2389 let offContext = this.offCanvas.getContext("2d", this.settings) 2390 offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2391 offContext.fillStyle = 'rgb(0,0,255)' 2392 offContext.fillRect(0, 0, 100, 100) 2393 offContext.resetTransform() 2394 offContext.fillStyle = 'rgb(255,0,0)' 2395 offContext.fillRect(0, 0, 100, 100) 2396 let image = this.offCanvas.transferToImageBitmap() 2397 this.context.transferFromImageBitmap(image) 2398 }) 2399 } 2400 .width('100%') 2401 .height('100%') 2402 } 2403 } 2404 ``` 2405  2406 2407### rotate 2408 2409rotate(angle: number): void 2410 2411针对当前坐标轴进行顺时针旋转。 2412 2413**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2414 2415**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2416 2417**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2418 2419 **参数：** 2420 2421| 参数名 | 类型 | 必填 | 说明 | 2422| ----- | ------ | ---- | ---------------------------------------- | 2423| angle | number | 是 | 设置顺时针旋转的弧度值，可以通过 degree * Math.PI / 180 将角度转换为弧度值。<br>单位：弧度。 | 2424 2425 **示例：** 2426 2427 ```ts 2428 // xxx.ets 2429 @Entry 2430 @Component 2431 struct Rotate { 2432 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2433 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2434 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2435 2436 build() { 2437 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2438 Canvas(this.context) 2439 .width('100%') 2440 .height('100%') 2441 .backgroundColor('#ffff00') 2442 .onReady(() =>{ 2443 let offContext = this.offCanvas.getContext("2d", this.settings) 2444 offContext.rotate(45 * Math.PI / 180) 2445 offContext.fillRect(70, 20, 50, 50) 2446 let image = this.offCanvas.transferToImageBitmap() 2447 this.context.transferFromImageBitmap(image) 2448 }) 2449 } 2450 .width('100%') 2451 .height('100%') 2452 } 2453 } 2454 ``` 2455 2456  2457 2458 2459### scale 2460 2461scale(x: number, y: number): void 2462 2463设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 2464 2465**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2466 2467**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2468 2469**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2470 2471 **参数：** 2472 2473| 参数名 | 类型 | 必填 | 说明 | 2474| ---- | ------ | ---- | ----------- | 2475| x | number | 是 | 设置水平方向的缩放值。 | 2476| y | number | 是 | 设置垂直方向的缩放值。 | 2477 2478 **示例：** 2479 2480 ```ts 2481 // xxx.ets 2482 @Entry 2483 @Component 2484 struct Scale { 2485 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2486 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2487 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2488 2489 build() { 2490 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2491 Canvas(this.context) 2492 .width('100%') 2493 .height('100%') 2494 .backgroundColor('#ffff00') 2495 .onReady(() =>{ 2496 let offContext = this.offCanvas.getContext("2d", this.settings) 2497 offContext.lineWidth = 3 2498 offContext.strokeRect(30, 30, 50, 50) 2499 offContext.scale(2, 2) // Scale to 200% 2500 offContext.strokeRect(30, 30, 50, 50) 2501 let image = this.offCanvas.transferToImageBitmap() 2502 this.context.transferFromImageBitmap(image) 2503 }) 2504 } 2505 .width('100%') 2506 .height('100%') 2507 } 2508 } 2509 ``` 2510 2511  2512 2513 2514### transform 2515 2516transform(a: number, b: number, c: number, d: number, e: number, f: number): void 2517 2518transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 2519 2520**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2521 2522**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2523 2524**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2525 2526> **说明：** 2527> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标)： 2528> 2529> - x' = scaleX \* x + skewY \* y + translateX 2530> 2531> - y' = skewX \* x + scaleY \* y + translateY 2532 2533**参数：** 2534 2535| 参数名 | 类型 | 必填 | 说明 | 2536| ---- | ------ | ---- | -------------------- | 2537| a | number | 是 | scaleX: 指定水平缩放值。 | 2538| b | number | 是 | skewY: 指定垂直倾斜值。 | 2539| c | number | 是 | skewX: 指定水平倾斜值。 | 2540| d | number | 是 | scaleY: 指定垂直缩放值。 | 2541| e | number | 是 | translateX: 指定水平移动值。<br>默认单位：vp。 | 2542| f | number | 是 | translateY: 指定垂直移动值。<br>默认单位：vp。 | 2543 2544 **示例：** 2545 2546 ```ts 2547 // xxx.ets 2548 @Entry 2549 @Component 2550 struct Transform { 2551 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2552 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2553 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2554 2555 build() { 2556 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2557 Canvas(this.context) 2558 .width('100%') 2559 .height('100%') 2560 .backgroundColor('#ffff00') 2561 .onReady(() =>{ 2562 let offContext = this.offCanvas.getContext("2d", this.settings) 2563 offContext.fillStyle = 'rgb(0,0,0)' 2564 offContext.fillRect(0, 0, 100, 100) 2565 offContext.transform(1, 0.5, -0.5, 1, 10, 10) 2566 offContext.fillStyle = 'rgb(255,0,0)' 2567 offContext.fillRect(0, 0, 100, 100) 2568 offContext.transform(1, 0.5, -0.5, 1, 10, 10) 2569 offContext.fillStyle = 'rgb(0,0,255)' 2570 offContext.fillRect(0, 0, 100, 100) 2571 let image = this.offCanvas.transferToImageBitmap() 2572 this.context.transferFromImageBitmap(image) 2573 }) 2574 } 2575 .width('100%') 2576 .height('100%') 2577 } 2578 } 2579 ``` 2580 2581  2582 2583 2584### setTransform 2585 2586setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void 2587 2588setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 2589 2590**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 2591 2592**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 2593 2594**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2595 2596**参数：** 2597 2598| 参数名 | 类型 | 必填 | 描述 | 2599| ---- | ------ | ---- | -------------------- | 2600| a | number | 是 | scaleX: 指定水平缩放值。 | 2601| b | number | 是 | skewY: 指定垂直倾斜值。 | 2602| c | number | 是 | skewX: 指定水平倾斜值。 | 2603| d | number | 是 | scaleY: 指定垂直缩放值。 | 2604| e | number | 是 | translateX: 指定水平移动值。<br>默认单位：vp。 | 2605| f | number | 是 | translateY: 指定垂直移动值。<br>默认单位：vp。 | 2606 2607 **示例：** 2608 2609 ```ts 2610 // xxx.ets 2611 @Entry 2612 @Component 2613 struct SetTransform { 2614 private settings: RenderingContextSettings = new RenderingContextSettings(true) 2615 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 2616 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 2617 2618 build() { 2619 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 2620 Canvas(this.context) 2621 .width('100%') 2622 .height('100%') 2623 .backgroundColor('#ffff00') 2624 .onReady(() =>{ 2625 let offContext = this.offCanvas.getContext("2d", this.settings) 2626 offContext.fillStyle = 'rgb(255,0,0)' 2627 offContext.fillRect(0, 0, 100, 100) 2628 offContext.setTransform(1,0.5, -0.5, 1, 10, 10) 2629 offContext.fillStyle = 'rgb(0,0,255)' 2630 offContext.fillRect(0, 0, 100, 100) 2631 let image = this.offCanvas.transferToImageBitmap() 2632 this.context.transferFromImageBitmap(image) 2633 }) 2634 } 2635 .width('100%') 2636 .height('100%') 2637 } 2638 } 2639 ``` 2640 2641  2642 2643 2644### setTransform 2645 2646setTransform(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 ```ts 2998 // xxx.ets 2999 @Entry 3000 @Component 3001 struct GetPixelMap { 3002 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3003 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3004 private img: ImageBitmap = new ImageBitmap("common/images/example.jpg") 3005 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3006 3007 build() { 3008 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3009 Canvas(this.context) 3010 .width('100%') 3011 .height('100%') 3012 .backgroundColor('#ffff00') 3013 .onReady(() => { 3014 let offContext = this.offCanvas.getContext("2d", this.settings) 3015 offContext.drawImage(this.img, 100, 100, 130, 130) 3016 let pixelmap = offContext.getPixelMap(150, 150, 130, 130) 3017 offContext.setPixelMap(pixelmap) 3018 let image = this.offCanvas.transferToImageBitmap() 3019 this.context.transferFromImageBitmap(image) 3020 }) 3021 } 3022 .width('100%') 3023 .height('100%') 3024 } 3025 } 3026 ``` 3027 3028  3029 3030### setPixelMap 3031 3032setPixelMap(value?: PixelMap): void 3033 3034将当前传入[PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7)对象绘制在画布上。setPixelMap示例同getPixelMap。 3035 3036**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3037 3038**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3039 3040 **参数：** 3041 3042| 参数名 | 类型 | 必填 | 说明 | 3043| ---- | ------ | ---- | --------------- | 3044| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 否 | 包含像素值的PixelMap对象<br>默认值：null。 | 3045 3046 3047### getImageData 3048 3049getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 3050 3051以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3052 3053**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3054 3055**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3056 3057**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3058 3059 **参数：** 3060 3061| 参数名 | 类型 | 必填 | 说明 | 3062| ---- | ------ | ---- | --------------- | 3063| sx | number | 是 | 需要输出的区域的左上角x坐标。<br>默认单位：vp。 | 3064| sy | number | 是 | 需要输出的区域的左上角y坐标。<br>默认单位：vp。 | 3065| sw | number | 是 | 需要输出的区域的宽度。<br>默认单位：vp。 | 3066| sh | number | 是 | 需要输出的区域的高度。<br>默认单位：vp。 | 3067 3068 **返回值：** 3069 3070| 类型 | 说明 | 3071| ---------------------------------------- | ------------- | 3072| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象 | 3073 3074 3075**示例：** 3076 3077 ```ts 3078 // xxx.ets 3079 @Entry 3080 @Component 3081 struct GetImageData { 3082 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3083 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3084 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3085 private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") 3086 3087 build() { 3088 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3089 Canvas(this.context) 3090 .width('100%') 3091 .height('100%') 3092 .backgroundColor('#ffff00') 3093 .onReady(() =>{ 3094 let offContext = this.offCanvas.getContext("2d", this.settings) 3095 offContext.drawImage(this.img,0,0,130,130) 3096 let imagedata = offContext.getImageData(50,50,130,130) 3097 offContext.putImageData(imagedata,150,150) 3098 let image = this.offCanvas.transferToImageBitmap() 3099 this.context.transferFromImageBitmap(image) 3100 }) 3101 } 3102 .width('100%') 3103 .height('100%') 3104 } 3105 } 3106 ``` 3107 3108  3109 3110 3111### putImageData 3112 3113putImageData(imageData: ImageData, dx: number | string, dy: number | string): void 3114 3115使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3116 3117**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3118 3119**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3120 3121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3122 3123 **参数：** 3124 3125| 参数名 | 类型 | 必填 | 描述 | 3126| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3127| imagedata | Object | 是 | 包含像素值的ImageData对象。 | 3128| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp。 | 3129| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp。 | 3130 3131putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth?: number | string, dirtyHeight: number | string): void 3132 3133使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。 3134 3135**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3136 3137**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3138 3139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3140 3141 **参数：** 3142 3143| 参数名 | 类型 | 必填 | 描述 | 3144| ----------- | ---------------------------------------- | ---- | ----------------------------- | 3145| imagedata | Object | 是 | 包含像素值的ImageData对象。 | 3146| dx | number \| string<sup>10+</sup> | 是 | 填充区域在x轴方向的偏移量。<br>默认单位：vp。 | 3147| dy | number \| string<sup>10+</sup> | 是 | 填充区域在y轴方向的偏移量。<br>默认单位：vp。 | 3148| dirtyX | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。<br>默认单位：vp。 | 3149| dirtyY | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。<br>默认单位：vp。 | 3150| dirtyWidth | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的宽度。<br>默认单位：vp。 | 3151| dirtyHeight | number \| string<sup>10+</sup> | 是 | 源图像数据矩形裁切范围的高度。<br>默认单位：vp。 | 3152 3153 **示例：** 3154 3155 ```ts 3156 // xxx.ets 3157 @Entry 3158 @Component 3159 struct PutImageData { 3160 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3161 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3162 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3163 3164 build() { 3165 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3166 Canvas(this.context) 3167 .width('100%') 3168 .height('100%') 3169 .backgroundColor('#ffff00') 3170 .onReady(() => { 3171 let offContext = this.offCanvas.getContext("2d", this.settings) 3172 let imageDataNum = offContext.createImageData(100, 100) 3173 let imageData = offContext.createImageData(imageDataNum) 3174 for (let i = 0; i < imageData.data.length; i += 4) { 3175 imageData.data[i + 0] = 255 3176 imageData.data[i + 1] = 0 3177 imageData.data[i + 2] = 255 3178 imageData.data[i + 3] = 255 3179 } 3180 offContext.putImageData(imageData, 10, 10) 3181 offContext.putImageData(imageData, 150, 10, 0, 0, 50, 50) 3182 let image = this.offCanvas.transferToImageBitmap() 3183 this.context.transferFromImageBitmap(image) 3184 }) 3185 } 3186 .width('100%') 3187 .height('100%') 3188 } 3189 } 3190 ``` 3191 3192  3193 3194### setLineDash 3195 3196setLineDash(segments: number[]): void 3197 3198设置画布的虚线样式。 3199 3200**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3201 3202**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3203 3204**参数：** 3205 3206| 参数名 | 类型 | 必填 | 说明 | 3207| -------- | -------- | -------- | ------------------- | 3208| segments | number[] | 是 | 描述线段如何交替和线段间距长度的数组。<br>默认单位：vp。 | 3209 3210**示例：** 3211 3212 ```ts 3213 @Entry 3214 @Component 3215 struct SetLineDash { 3216 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3217 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3218 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3219 3220 build() { 3221 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3222 Canvas(this.context) 3223 .width('100%') 3224 .height('100%') 3225 .backgroundColor('#ffff00') 3226 .onReady(() =>{ 3227 let offContext = this.offCanvas.getContext("2d", this.settings) 3228 offContext.arc(100, 75, 50, 0, 6.28) 3229 offContext.setLineDash([10,20]) 3230 offContext.stroke() 3231 let image = this.offCanvas.transferToImageBitmap() 3232 this.context.transferFromImageBitmap(image) 3233 }) 3234 } 3235 .width('100%') 3236 .height('100%') 3237 } 3238 } 3239 ``` 3240  3241 3242 3243### getLineDash 3244 3245getLineDash(): number[] 3246 3247获得当前画布的虚线样式。 3248 3249**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3250 3251**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3252 3253**返回值：** 3254 3255| 类型 | 说明 | 3256| -------- | ------------------------ | 3257| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。<br>默认单位：vp。 | 3258 3259**示例：** 3260 3261 ```ts 3262 // xxx.ets 3263 @Entry 3264 @Component 3265 struct OffscreenCanvasGetLineDash { 3266 @State message: string = 'Hello World' 3267 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3268 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3269 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3270 build() { 3271 Row() { 3272 Column() { 3273 Text(this.message) 3274 .fontSize(50) 3275 .fontWeight(FontWeight.Bold) 3276 .onClick(()=>{ 3277 console.error('before getlinedash clicked') 3278 let offContext = this.offCanvas.getContext("2d", this.settings) 3279 let res = offContext.getLineDash() 3280 console.error(JSON.stringify(res)) 3281 }) 3282 Canvas(this.context) 3283 .width('100%') 3284 .height('100%') 3285 .backgroundColor('#ffff00') 3286 .onReady(() => { 3287 let offContext = this.offCanvas.getContext("2d", this.settings) 3288 offContext.arc(100, 75, 50, 0, 6.28) 3289 offContext.setLineDash([10,20]) 3290 offContext.stroke() 3291 let res = offContext.getLineDash() 3292 let image = this.offCanvas.transferToImageBitmap() 3293 this.context.transferFromImageBitmap(image) 3294 }) 3295 } 3296 .width('100%') 3297 } 3298 .height('100%') 3299 } 3300 } 3301 ``` 3302 3303 3304 3305 3306### toDataURL 3307 3308toDataURL(type?: string, quality?: any): string 3309 3310生成一个包含图片展示的URL，该接口存在内存拷贝行为，高耗时，应避免频繁使用。 3311 3312**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3313 3314**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3315 3316**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3317 3318**参数：** 3319 3320| 参数名 | 类型 | 必填 | 说明 | 3321| ------- | ------ | ---- | ---------------------------------------- | 3322| type | string | 否 | 用于指定图像格式。<br/>可选参数为："image/png", "image/jpeg", "image/webp"。。<br>默认值：image/png。 | 3323| quality | any | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。<br>默认值：0.92。 | 3324 3325**返回值：** 3326 3327| 类型 | 说明 | 3328| ------ | --------- | 3329| string | 图像的URL地址。 | 3330 3331**示例：** 3332 3333 ```ts 3334 // xxx.ets 3335 @Entry 3336 @Component 3337 struct ToDataURL { 3338 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3339 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3340 private offCanvas: OffscreenCanvas = new OffscreenCanvas(100, 100) 3341 @State dataURL: string = "" 3342 3343 build() { 3344 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3345 Canvas(this.context) 3346 .width(100) 3347 .height(100) 3348 .onReady(() => { 3349 let offContext = this.offCanvas.getContext("2d", this.settings) 3350 offContext.fillRect(0,0,100,100) 3351 this.dataURL = offContext.toDataURL() 3352 }) 3353 Text(this.dataURL) 3354 } 3355 .width('100%') 3356 .height('100%') 3357 .backgroundColor('#ffff00') 3358 } 3359 } 3360 ``` 3361 3362 3363 3364### transferToImageBitmap 3365 3366transferToImageBitmap(): ImageBitmap 3367 3368在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 3369 3370**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3371 3372**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3373 3374**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3375 3376**返回值：** 3377 3378| 类型 | 说明 | 3379| ---------------------------------------- | --------------- | 3380| [ImageBitmap](ts-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 | 3381 3382 3383 **示例：** 3384 3385 ```ts 3386 // xxx.ets 3387 @Entry 3388 @Component 3389 struct PutImageData { 3390 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3391 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3392 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3393 3394 build() { 3395 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3396 Canvas(this.context) 3397 .width('100%') 3398 .height('100%') 3399 .backgroundColor('#ffff00') 3400 .onReady(() =>{ 3401 let offContext = this.offCanvas.getContext("2d", this.settings) 3402 let imageData = offContext.createImageData(100, 100) 3403 for (let i = 0; i < imageData.data.length; i += 4) { 3404 imageData.data[i + 0] = 255 3405 imageData.data[i + 1] = 0 3406 imageData.data[i + 2] = 255 3407 imageData.data[i + 3] = 255 3408 } 3409 offContext.putImageData(imageData, 10, 10) 3410 let image = this.offCanvas.transferToImageBitmap() 3411 this.context.transferFromImageBitmap(image) 3412 }) 3413 } 3414 .width('100%') 3415 .height('100%') 3416 } 3417 } 3418 ``` 3419 3420 3421### restore 3422 3423restore(): void 3424 3425对保存的绘图上下文进行恢复。 3426 3427> **说明：** 3428> 3429> 当restore()次数未超出save()次数时，从栈中弹出存储的绘制状态并恢复CanvasRenderingContext2D对象的属性、剪切路径和变换矩阵的值。</br> 3430> 当restore()次数超出save()次数时，此方法不做任何改变。</br> 3431> 当没有保存状态时，此方法不做任何改变。 3432 3433**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3434 3435**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3436 3437**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3438 3439 **示例：** 3440 3441 ```ts 3442 // xxx.ets 3443 @Entry 3444 @Component 3445 struct CanvasExample { 3446 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3447 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3448 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3449 3450 build() { 3451 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3452 Canvas(this.context) 3453 .width('100%') 3454 .height('100%') 3455 .backgroundColor('#ffff00') 3456 .onReady(() =>{ 3457 let offContext = this.offCanvas.getContext("2d", this.settings) 3458 offContext.save() // save the default state 3459 offContext.fillStyle = "#00ff00" 3460 offContext.fillRect(20, 20, 100, 100) 3461 offContext.restore() // restore to the default state 3462 offContext.fillRect(150, 75, 100, 100) 3463 let image = this.offCanvas.transferToImageBitmap() 3464 this.context.transferFromImageBitmap(image) 3465 }) 3466 } 3467 .width('100%') 3468 .height('100%') 3469 } 3470 } 3471 ``` 3472 3473 3474 3475### save 3476 3477save(): void 3478 3479对当前的绘图上下文进行保存。 3480 3481**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3482 3483**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3484 3485**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3486 3487 **示例：** 3488 3489 ```ts 3490 // xxx.ets 3491 @Entry 3492 @Component 3493 struct CanvasExample { 3494 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3495 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3496 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3497 3498 build() { 3499 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3500 Canvas(this.context) 3501 .width('100%') 3502 .height('100%') 3503 .backgroundColor('#ffff00') 3504 .onReady(() =>{ 3505 let offContext = this.offCanvas.getContext("2d", this.settings) 3506 offContext.save() // save the default state 3507 offContext.fillStyle = "#00ff00" 3508 offContext.fillRect(20, 20, 100, 100) 3509 offContext.restore() // restore to the default state 3510 offContext.fillRect(150, 75, 100, 100) 3511 let image = this.offCanvas.transferToImageBitmap() 3512 this.context.transferFromImageBitmap(image) 3513 }) 3514 } 3515 .width('100%') 3516 .height('100%') 3517 } 3518 } 3519 ``` 3520 3521 3522 3523### createLinearGradient 3524 3525createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient 3526 3527创建一个线性渐变色。 3528 3529**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3530 3531**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3532 3533**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3534 3535 **参数：** 3536 3537| 参数名 | 类型 | 必填 | 说明 | 3538| ---- | ------ | ---- | -------- | 3539| x0 | number | 是 | 起点的x轴坐标。<br>默认单位：vp。 | 3540| y0 | number | 是 | 起点的y轴坐标。<br>默认单位：vp。 | 3541| x1 | number | 是 | 终点的x轴坐标。<br>默认单位：vp。 | 3542| y1 | number | 是 | 终点的y轴坐标。<br>默认单位：vp。 | 3543 3544**返回值：** 3545 3546| 类型 | 说明 | 3547| ------ | --------- | 3548| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 3549 3550 **示例：** 3551 3552 ```ts 3553 // xxx.ets 3554 @Entry 3555 @Component 3556 struct CreateLinearGradient { 3557 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3558 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3559 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3560 3561 build() { 3562 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3563 Canvas(this.context) 3564 .width('100%') 3565 .height('100%') 3566 .backgroundColor('#ffff00') 3567 .onReady(() =>{ 3568 let offContext = this.offCanvas.getContext("2d", this.settings) 3569 let grad = offContext.createLinearGradient(50,0, 300,100) 3570 grad.addColorStop(0.0, '#ff0000') 3571 grad.addColorStop(0.5, '#ffffff') 3572 grad.addColorStop(1.0, '#00ff00') 3573 offContext.fillStyle = grad 3574 offContext.fillRect(0, 0, 400, 400) 3575 let image = this.offCanvas.transferToImageBitmap() 3576 this.context.transferFromImageBitmap(image) 3577 }) 3578 } 3579 .width('100%') 3580 .height('100%') 3581 } 3582 } 3583 ``` 3584 3585  3586 3587 3588### createRadialGradient 3589 3590createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient 3591 3592创建一个径向渐变色。 3593 3594**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 3595 3596**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3597 3598**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3599 3600 **参数：** 3601 3602| 参数名 | 类型 | 必填 | 说明 | 3603| ---- | ------ | ---- | ----------------- | 3604| x0 | number | 是 | 起始圆的x轴坐标。<br>默认单位：vp。 | 3605| y0 | number | 是 | 起始圆的y轴坐标。<br>默认单位：vp。 | 3606| r0 | number | 是 | 起始圆的半径。必须是非负且有限的。<br>默认单位：vp。 | 3607| x1 | number | 是 | 终点圆的x轴坐标。<br>默认单位：vp。 | 3608| y1 | number | 是 | 终点圆的y轴坐标。<br>默认单位：vp。 | 3609| r1 | number | 是 | 终点圆的半径。必须为非负且有限的。<br>默认单位：vp。 | 3610 3611**返回值：** 3612 3613| 类型 | 说明 | 3614| ------ | --------- | 3615| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 3616 3617 **示例：** 3618 3619 ```ts 3620 // xxx.ets 3621 @Entry 3622 @Component 3623 struct CreateRadialGradient { 3624 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3625 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3626 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3627 3628 build() { 3629 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3630 Canvas(this.context) 3631 .width('100%') 3632 .height('100%') 3633 .backgroundColor('#ffff00') 3634 .onReady(() =>{ 3635 let offContext = this.offCanvas.getContext("2d", this.settings) 3636 let grad = offContext.createRadialGradient(200,200,50, 200,200,200) 3637 grad.addColorStop(0.0, '#ff0000') 3638 grad.addColorStop(0.5, '#ffffff') 3639 grad.addColorStop(1.0, '#00ff00') 3640 offContext.fillStyle = grad 3641 offContext.fillRect(0, 0, 440, 440) 3642 let image = this.offCanvas.transferToImageBitmap() 3643 this.context.transferFromImageBitmap(image) 3644 }) 3645 } 3646 .width('100%') 3647 .height('100%') 3648 } 3649 } 3650 ``` 3651 3652  3653 3654### createConicGradient<sup>10+</sup> 3655 3656createConicGradient(startAngle: number, x: number, y: number): CanvasGradient 3657 3658创建一个圆锥渐变色。 3659 3660**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 3661 3662**系统能力：** SystemCapability.ArkUI.ArkUI.Full 3663 3664**参数：** 3665 3666| 参数名 | 类型 | 必填 | 说明 | 3667| ---------- | ------ | ---- | ----------------------------------- | 3668| startAngle | number | 是 | 开始渐变的角度。角度测量从中心右侧水平开始，顺时针移动。<br>单位：弧度。 | 3669| x | number | 是 | 圆锥渐变的中心x轴坐标。<br>默认单位：vp。 | 3670| y | number | 是 | 圆锥渐变的中心y轴坐标。<br>默认单位：vp。 | 3671 3672**返回值：** 3673 3674| 类型 | 说明 | 3675| ------ | --------- | 3676| [CanvasGradient](ts-components-canvas-canvasgradient.md) | 新的CanvasGradient对象，用于在offscreenCanvas上创建渐变效果。 | 3677 3678**示例：** 3679 3680```ts 3681// xxx.ets 3682@Entry 3683@Component 3684struct OffscreenCanvasConicGradientPage { 3685 private settings: RenderingContextSettings = new RenderingContextSettings(true) 3686 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 3687 private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600) 3688 3689 build() { 3690 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 3691 Canvas(this.context) 3692 .width('100%') 3693 .height('100%') 3694 .backgroundColor('#ffffff') 3695 .onReady(() =>{ 3696 let offContext = this.offCanvas.getContext("2d", this.settings) 3697 let grad = offContext.createConicGradient(0, 50, 80) 3698 grad.addColorStop(0.0, '#ff0000') 3699 grad.addColorStop(0.5, '#ffffff') 3700 grad.addColorStop(1.0, '#00ff00') 3701 offContext.fillStyle = grad 3702 offContext.fillRect(0, 30, 100, 100) 3703 let image = this.offCanvas.transferToImageBitmap() 3704 this.context.transferFromImageBitmap(image) 3705 }) 3706 } 3707 .width('100%') 3708 .height('100%') 3709 } 3710} 3711``` 3712 3713  3714
