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