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