1# CanvasRenderingContext2D对象 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 11> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 12 13使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 14 15 16**示例：** 17 ```html 18 <!-- xxx.hml --> 19 <div> 20 <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 21 <input type="button" style="width: 180px; height: 60px;" value="handleClick" onclick="handleClick" /> 22 <input type="button" style="width: 180px; height: 60px;" value="antialias" onclick="antialias" /> 23 </div> 24 ``` 25 26 ```js 27 // xxx.js 28 export default { 29 handleClick() { 30 const el = this.$refs.canvas1; 31 const ctx = el.getContext('2d'); 32 ctx.beginPath(); 33 ctx.arc(100, 75, 50, 0, 6.28); 34 ctx.stroke(); 35 }, 36 antialias() { 37 const el = this.$refs.canvas1; 38 const ctx = el.getContext('2d', { antialias: true }); 39 ctx.beginPath(); 40 ctx.arc(100, 75, 50, 0, 6.28); 41 ctx.stroke(); 42 } 43 } 44 ``` 45 46- 示意图（关闭抗锯齿） 47 48  49 50- 示意图（开启抗锯齿） 51 52  53 54 55## 属性 56 57| 名称 | 类型 | 描述 | 58| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | 59| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](js-components-canvas-canvasgradient.md) \| CanvasPattern | 指定绘制的填充色。<br/>- 类型为<color>时，表示设置填充区域的颜色。<br/>- 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。<br/>- 类型为CanvasPattern时，使用 createPattern()方法创建。 | 60| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 | 61| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](js-components-canvas-canvasgradient.md) \| CanvasPattern | 设置描边的颜色。<br/>- 类型为<color>时，表示设置描边使用的颜色。<br/>- 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。<br/>- 类型为CanvasPattern时，使用 createPattern()方法创建。 | 62| [lineCap](#linecap) | string | 指定线端点的样式，可选值为：<br/>- butt：线端点以方形结束。<br/>- round：线端点以圆形结束。<br/>- square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br>默认值：butt | 63| [lineJoin](#linejoin) | string | 指定线段间相交的交点样式，可选值为：<br/>- round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>- bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。<br/>- miter：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br>默认值：miter | 64| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。<br>默认值：10 | 65| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法：ctx.font="font-style font-weight font-size font-family"<sup>5+</sup><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。<br/>- font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。<br>默认值："normal normal 14px sans-serif" | 66| [textAlign](#textalign) | string | 设置文本绘制中的文本对齐方式，可选值为：<br/>- left：文本左对齐。<br/>- right：文本右对齐。<br/>- center：文本居中对齐。<br/>- start：文本对齐界线开始的地方。<br/>- end：文本对齐界线结束的地方。<br/>ltr布局模式下start和left一致，rtl布局模式下start和right一致。<br>默认值：left | 67| [textBaseline](#textbaseline) | string | 设置文本绘制中的水平对齐方式，可选值为：<br/>- alphabetic：文本基线是标准的字母基线。<br/>- top：文本基线在文本块的顶部。<br/>- hanging：文本基线是悬挂基线。<br/>- middle：文本基线在文本块的中间。<br/>- ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideographic基线位置在字符本身的底部。<br/>- bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。<br>默认值： alphabetic | 68| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 | 69| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。<br>默认值：0.0 | 70| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有source-over，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。具体请参考[表 类型字段说明](#globalcompositeoperation)。<br>默认值：source-over | 71| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。<br>默认值：0.0 | 72| [shadowColor](#shadowcolor) | <color> | 设置绘制阴影时的阴影颜色。 | 73| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 | 74| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 | 75| [imageSmoothingEnabled](#imagesmoothingenabled6)<sup>6+</sup> | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。<br>默认值：true | 76 77 78### fillStyle 79 80 ```html 81<!-- xxx.hml --> 82<div> 83 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 84</div> 85 ``` 86 87```js 88// xxx.js 89export default { 90 onShow() { 91 const el = this.$refs.canvas; 92 const ctx = el.getContext('2d'); 93 ctx.fillStyle = '#0000ff'; 94 ctx.fillRect(20, 20, 150, 100); 95 } 96} 97``` 98 99 100 101 102### lineWidth 103 104```html 105<!-- xxx.hml --> 106<div> 107 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 108</div> 109``` 110 111```js 112// xxx.js 113export default { 114 onShow() { 115 const el = this.$refs.canvas; 116 const ctx = el.getContext('2d'); 117 ctx.lineWidth = 5; 118 ctx.strokeRect(25, 25, 85, 105); 119 } 120} 121 122``` 123 124 125 126 127### strokeStyle 128 129```html 130<!-- xxx.hml --> 131<div> 132 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 133</div> 134``` 135 136```js 137// xxx.js 138export default { 139 onShow() { 140 const el = this.$refs.canvas; 141 const ctx = el.getContext('2d'); 142 ctx.lineWidth = 10; 143 ctx.strokeStyle = '#0000ff'; 144 ctx.strokeRect(25, 25, 155, 105); 145 } 146} 147``` 148 149 150 151 152### lineCap 153 154```html 155<!-- xxx.hml --> 156<div> 157 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 158</div> 159``` 160 161```js 162// xxx.js 163export default { 164 onShow() { 165 const el = this.$refs.canvas; 166 const ctx = el.getContext('2d'); 167 ctx.lineWidth = 8; 168 ctx.beginPath(); 169 ctx.lineCap = 'round'; 170 ctx.moveTo(30, 50); 171 ctx.lineTo(220, 50); 172 ctx.stroke(); 173 } 174} 175``` 176 177 178 179### lineJoin 180 181```html 182<!-- xxx.hml --> 183<div> 184 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 185</div> 186``` 187 188```js 189// xxx.js 190export default { 191 onShow() { 192 const el = this.$refs.canvas; 193 const ctx = el.getContext('2d'); 194 ctx.beginPath(); 195 ctx.lineWidth = 8; 196 ctx.lineJoin = 'miter'; 197 ctx.moveTo(30, 30); 198 ctx.lineTo(120, 60); 199 ctx.lineTo(30, 110); 200 ctx.stroke(); 201 } 202} 203``` 204 205 206 207### miterLimit 208 209```html 210<!-- xxx.hml --> 211<div> 212 <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas> 213</div> 214``` 215 216```js 217// xxx.js 218export default { 219 onShow() { 220 const el = this.$refs.canvas; 221 const ctx = el.getContext('2d'); 222 ctx.lineWidth =14; 223 ctx.lineJoin = 'miter'; 224 ctx.miterLimit = 3; 225 ctx.moveTo(30, 30); 226 ctx.lineTo(120, 60); 227 ctx.lineTo(30, 70); 228 ctx.stroke(); 229 } 230} 231``` 232 233 234 235 236### font 237 238```html 239<!-- xxx.hml --> 240<div> 241 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 242</div> 243``` 244 245```js 246// xxx.js 247export default { 248 onShow() { 249 const el = this.$refs.canvas; 250 const ctx = el.getContext('2d'); 251 ctx.font = '30px sans-serif'; 252 ctx.fillText("Hello World", 20, 60); 253 } 254} 255``` 256 257 258 259 260### textAlign 261 262```html 263<!-- xxx.hml --> 264<div> 265 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 266</div> 267``` 268 269```js 270// xxx.js 271export default { 272 onShow() { 273 const el = this.$refs.canvas; 274 const ctx = el.getContext('2d'); 275 ctx.strokeStyle = '#0000ff'; 276 ctx.moveTo(140, 10); 277 ctx.lineTo(140, 160); 278 ctx.stroke(); 279 ctx.font = '18px sans-serif'; 280 // Show the different textAlign values 281 ctx.textAlign = 'start'; 282 ctx.fillText('textAlign=start', 140, 60); 283 ctx.textAlign = 'end'; 284 ctx.fillText('textAlign=end', 140, 80); 285 ctx.textAlign = 'left'; 286 ctx.fillText('textAlign=left', 140, 100); 287 ctx.textAlign = 'center'; 288 ctx.fillText('textAlign=center',140, 120); 289 ctx.textAlign = 'right'; 290 ctx.fillText('textAlign=right',140, 140); 291 } 292} 293 294``` 295 296 297 298 299### textBaseline 300 301```html 302<!-- xxx.hml --> 303<div> 304 <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas> 305</div> 306``` 307 308```js 309// xxx.js 310export default { 311 onShow() { 312 const el = this.$refs.canvas; 313 const ctx = el.getContext('2d'); 314 ctx.strokeStyle = '#0000ff'; 315 ctx.moveTo(0, 120); 316 ctx.lineTo(400, 120); 317 ctx.stroke(); 318 ctx.font = '20px sans-serif'; 319 ctx.textBaseline = 'top'; 320 ctx.fillText('Top', 10, 120); 321 ctx.textBaseline = 'bottom'; 322 ctx.fillText('Bottom', 55, 120); 323 ctx.textBaseline = 'middle'; 324 ctx.fillText('Middle', 125, 120); 325 ctx.textBaseline = 'alphabetic'; 326 ctx.fillText('Alphabetic', 195, 120); 327 ctx.textBaseline = 'hanging'; 328 ctx.fillText('Hanging', 295, 120); 329 } 330} 331``` 332 333 334 335### globalAlpha 336 337```html 338<!-- xxx.hml --> 339<div> 340 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 341</div> 342``` 343 344```js 345// xxx.js 346export default { 347 onShow() { 348 const el = this.$refs.canvas; 349 const ctx = el.getContext('2d'); 350 ctx.fillStyle = 'rgb(255,0,0)'; 351 ctx.fillRect(0, 0, 50, 50); 352 ctx.globalAlpha = 0.4; 353 ctx.fillStyle = 'rgb(0,0,255)'; 354 ctx.fillRect(50, 50, 50, 50); 355 356 } 357} 358``` 359 360 361 362### lineDashOffset 363 364```html 365<!-- xxx.hml --> 366<div> 367 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 368</div> 369``` 370 371```js 372// xxx.js 373export default { 374 onShow() { 375 const el = this.$refs.canvas; 376 const ctx = el.getContext('2d'); 377 ctx.arc(100, 75, 50, 0, 6.28); 378 ctx.setLineDash([10,20]); 379 ctx.lineDashOffset = 10.0; 380 ctx.stroke(); 381 } 382} 383``` 384 385 386 387### globalCompositeOperation 388 389类型字段说明。 390 391| 值 | 描述 | 392| ---------------- | ------------------------ | 393| source-over | 在现有绘制内容上显示新绘制内容，属于默认值。 | 394| source-atop | 在现有绘制内容顶部显示新绘制内容。 | 395| source-in | 在现有绘制内容中显示新绘制内容。 | 396| source-out | 在现有绘制内容之外显示新绘制内容。 | 397| destination-over | 在新绘制内容上方显示现有绘制内容。 | 398| destination-atop | 在新绘制内容顶部显示现有绘制内容。 | 399| destination-in | 在新绘制内容中显示现有绘制内容。 | 400| destination-out | 在新绘制内容外显示现有绘制内容。 | 401| lighter | 显示新绘制内容和现有绘制内容。 | 402| copy | 显示新绘制内容而忽略现有绘制内容。 | 403| xor | 使用异或操作对新绘制内容与现有绘制内容进行融合。 | 404 405**示例：** 406 407```html 408<!-- xxx.hml --> 409<div> 410 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 411</div> 412``` 413 414 ```js 415// xxx.js 416export default { 417 onShow() { 418 const el = this.$refs.canvas; 419 const ctx = el.getContext('2d'); 420 ctx.fillStyle = 'rgb(255,0,0)'; 421 ctx.fillRect(20, 20, 50, 50); 422 ctx.globalCompositeOperation = 'source-over'; 423 ctx.fillStyle = 'rgb(0,0,255)'; 424 ctx.fillRect(50, 50, 50, 50); 425 // Start drawing second example 426 ctx.fillStyle = 'rgb(255,0,0)'; 427 ctx.fillRect(120, 20, 50, 50); 428 ctx.globalCompositeOperation = 'destination-over'; 429 ctx.fillStyle = 'rgb(0,0,255)'; 430 ctx.fillRect(150, 50, 50, 50); 431 } 432} 433 ``` 434 435  436 437 示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。 438 439### shadowBlur 440 441 ```html 442<!-- xxx.hml --> 443<div> 444 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 445</div> 446 ``` 447 448```js 449// xxx.js 450export default { 451 onShow() { 452 const el = this.$refs.canvas; 453 const ctx = el.getContext('2d'); 454 ctx.shadowBlur = 30; 455 ctx.shadowColor = 'rgb(0,0,0)'; 456 ctx.fillStyle = 'rgb(255,0,0)'; 457 ctx.fillRect(20, 20, 100, 80); 458 } 459} 460``` 461 462 463 464### shadowColor 465 466```html 467<!-- xxx.hml --> 468<div> 469 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 470</div> 471``` 472 473```js 474// xxx.js 475export default { 476 onShow() { 477 const el = this.$refs.canvas; 478 const ctx = el.getContext('2d'); 479 ctx.shadowBlur = 30; 480 ctx.shadowColor = 'rgb(0,0,255)'; 481 ctx.fillStyle = 'rgb(255,0,0)'; 482 ctx.fillRect(30, 30, 100, 100); 483 } 484} 485``` 486 487 488 489### shadowOffsetX 490 491```html 492<!-- xxx.hml --> 493<div> 494 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 495</div> 496``` 497 498```js 499// xxx.js 500export default { 501 onShow() { 502 const el = this.$refs.canvas; 503 const ctx = el.getContext('2d'); 504 ctx.shadowBlur = 10; 505 ctx.shadowOffsetX = 20; 506 ctx.shadowColor = 'rgb(0,0,0)'; 507 ctx.fillStyle = 'rgb(255,0,0)'; 508 ctx.fillRect(20, 20, 100, 80); 509 } 510} 511``` 512 513 514 515 516### shadowOffsetY 517 518```html 519<!-- xxx.hml --> 520<div> 521 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 522</div> 523``` 524 525```js 526// xxx.js 527export default { 528 onShow() { 529 const el = this.$refs.canvas; 530 const ctx = el.getContext('2d'); 531 ctx.shadowBlur = 10; 532 ctx.shadowOffsetY = 20; 533 ctx.shadowColor = 'rgb(0,0,0)'; 534 ctx.fillStyle = 'rgb(255,0,0)'; 535 ctx.fillRect(30, 30, 100, 100); 536 } 537} 538``` 539 540 541 542### imageSmoothingEnabled<sup>6+</sup> 543 544```html 545<!-- xxx.hml --> 546<div> 547 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 548</div> 549``` 550 551```js 552// xxx.js 553export default { 554 onShow() { 555 const el = this.$refs.canvas; 556 const ctx = el.getContext('2d'); 557 var img = new Image(); 558 // 'common/image/example.jpg'需要替换为开发者所需的图像资源文件 559 img.src = 'common/image/example.jpg'; 560 img.onload = function() { 561 ctx.imageSmoothingEnabled = false; 562 ctx.drawImage(img, 0, 0, 400, 200); 563 }; 564 } 565} 566``` 567 568 569 570 571 572## 方法 573 574### fillRect 575 576fillRect(x: number, y: number, width:number, height: number): void 577 578填充一个矩形。 579 580**系统能力：** SystemCapability.ArkUI.ArkUI.Full 581 582**参数：** 583 584| 参数名 | 类型 | 必填 | 说明 | 585| ------ | ------- | ---- | ---------------------------- | 586| x | number | 是 | 指定矩形左上角点的x坐标。 | 587| y | number | 是 | 指定矩形左上角点的y坐标。 | 588| width | number | 是 | 指定矩形的宽度。 | 589| height | number | 是 | 指定矩形的高度。 | 590 591**示例：** 592 593```html 594 <!-- xxx.hml --> 595 <div> 596 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 597 </div> 598``` 599 600 ```js 601 //xxx.js 602 export default { 603 onShow() { 604 const el = this.$refs.canvas; 605 const ctx = el.getContext('2d'); 606 ctx.fillRect(20, 20, 200, 150); 607 } 608 } 609 ``` 610 611  612 613### clearRect 614 615clearRect(x: number, y: number, width:number, height: number): void 616 617删除指定区域内的绘制内容。 618 619**系统能力：** SystemCapability.ArkUI.ArkUI.Full 620 621**参数：** 622 623| 参数名 | 类型 | 必填 | 说明 | 624| ------ | ------- | ---- | ---------------------------- | 625| x | number | 是 | 指定矩形上的左上角x坐标。 | 626| y | number | 是 | 指定矩形上的左上角y坐标。 | 627| width | number | 是 | 指定矩形的宽度。 | 628| height | number | 是 | 指定矩形的高度。 | 629 630**示例：** 631 ```html 632 <!-- xxx.hml --> 633 <div> 634 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 635 </div> 636 ``` 637 638 ```js 639 //xxx.js 640 export default { 641 onShow() { 642 const el = this.$refs.canvas; 643 const ctx = el.getContext('2d'); 644 ctx.fillStyle = 'rgb(0,0,255)'; 645 ctx.fillRect(0, 0, 400, 200); 646 ctx.clearRect(20, 20, 150, 100); 647 } 648 } 649 ``` 650 651  652 653 654### strokeRect 655 656strokeRect(x: number, y: number, width:number, height: number): void 657 658绘制具有边框的矩形，矩形内部不填充。 659 660**系统能力：** SystemCapability.ArkUI.ArkUI.Full 661 662**参数：** 663 664| 参数名 | 类型 | 必填 | 说明 | 665| ------ | ------- | ---- | ---------------------------- | 666| x | number | 是 | 指定矩形的左上角x坐标。 | 667| y | number | 是 | 指定矩形的左上角y坐标。 | 668| width | number | 是 | 指定矩形的宽度。 | 669| height | number | 是 | 指定矩形的高度。 | 670 671**示例：** 672 ```html 673 <!-- xxx.hml --> 674 <div> 675 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 676 </div> 677 ``` 678 679 ```js 680 //xxx.js 681 export default { 682 onShow() { 683 const el = this.$refs.canvas; 684 const ctx = el.getContext('2d'); 685 ctx.strokeRect(30, 30, 200, 150); 686 } 687 } 688 ``` 689 690  691 692 693### fillText 694 695fillText(text: string, x: number, y: number): void 696 697绘制填充类文本。 698 699**系统能力：** SystemCapability.ArkUI.ArkUI.Full 700 701**参数：** 702 703| 参数名 | 类型 | 必填 | 说明 | 704| ------ | ------- | ---- | ---------------------------- | 705| text | string | 是 | 需要绘制的文本内容。 | 706| x | number | 是 | 需要绘制的文本的左下角x坐标。 | 707| y | number | 是 | 需要绘制的文本的左下角y坐标。 | 708 709**示例：** 710 ```html 711 <!-- xxx.hml --> 712 <div> 713 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 714 </div> 715 ``` 716 717 ```js 718 //xxx.js 719 export default { 720 onShow() { 721 const el = this.$refs.canvas; 722 const ctx = el.getContext('2d'); 723 ctx.font = '35px sans-serif'; 724 ctx.fillText("Hello World!", 10, 60); 725 } 726 } 727 ``` 728 729  730 731### strokeText 732 733strokeText(text: string, x: number, y: number): void 734 735绘制描边类文本。 736 737**系统能力：** SystemCapability.ArkUI.ArkUI.Full 738 739**参数：** 740 741| 参数名 | 类型 | 必填 | 说明 | 742| ------ | ------- | ---- | ---------------------------- | 743| text | string | 是 | 需要绘制的文本内容。 | 744| x | number | 是 | 需要绘制的文本的左下角x坐标。 | 745| y | number | 是 | 需要绘制的文本的左下角y坐标。 | 746 747**示例：** 748 ```html 749 <!-- xxx.hml --> 750 <div> 751 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 752 </div> 753 ``` 754 755 ```js 756 //xxx.js 757 export default { 758 onShow() { 759 const el = this.$refs.canvas; 760 const ctx = el.getContext('2d'); 761 ctx.font = '25px sans-serif'; 762 ctx.strokeText("Hello World!", 10, 60); 763 } 764 } 765 ``` 766 767  768 769### measureText 770 771measureText(text: string): TextMetrics 772 773该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 774 775**系统能力：** SystemCapability.ArkUI.ArkUI.Full 776 777**参数：** 778 779| 参数名 | 类型 | 必填 | 说明 | 780| ------ | ------- | ---- | ---------------------------- | 781| text | string | 是 | 需要进行测量的文本。 | 782 783**返回值：** 784 785| 类型 | 说明 | 786| ----------- | -------------------------------------- | 787| TextMetrics | 包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。 | 788 789**示例：** 790 ```html 791 <!-- xxx.hml --> 792 <div> 793 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 794 </div> 795 ``` 796 797 ```js 798 //xxx.js 799 export default { 800 onShow() { 801 const el = this.$refs.canvas; 802 const ctx = el.getContext('2d'); 803 ctx.font = '20px sans-serif'; 804 var txt = 'Hello World'; 805 ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); 806 ctx.fillText(txt, 20, 110); 807 } 808 } 809 ``` 810 811  812 813 814### stroke 815stroke(): void 816 817进行边框绘制操作。 818 819**系统能力：** SystemCapability.ArkUI.ArkUI.Full 820 821**示例：** 822 ```html 823 <!-- xxx.hml --> 824 <div> 825 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 826 </div> 827 ``` 828 829 ```js 830 //xxx.js 831 export default { 832 onShow() { 833 const el = this.$refs.canvas; 834 const ctx = el.getContext('2d'); 835 ctx.moveTo(25, 25); 836 ctx.lineTo(25, 250); 837 ctx.lineWidth = '6'; 838 ctx.strokeStyle = 'rgb(0,0,255)'; 839 ctx.stroke(); 840 } 841 } 842 ``` 843 844  845 846 847### beginPath 848beginPath(): void 849 850创建一个新的绘制路径。 851 852**系统能力：** SystemCapability.ArkUI.ArkUI.Full 853 854**示例：** 855 ```html 856 <!-- xxx.hml --> 857 <div> 858 <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas> 859 </div> 860 ``` 861 862 ```js 863 //xxx.js 864 export default { 865 onShow() { 866 const el = this.$refs.canvas; 867 const ctx = el.getContext('2d'); 868 ctx.beginPath(); 869 ctx.lineWidth = '6'; 870 ctx.strokeStyle = '#0000ff'; 871 ctx.moveTo(15, 80); 872 ctx.lineTo(280, 80); 873 ctx.stroke(); 874 } 875 } 876 ``` 877 878  879 880 881### moveTo 882moveTo(x: number, y: number): void 883 884路径从当前点移动到指定点。 885 886**系统能力：** SystemCapability.ArkUI.ArkUI.Full 887 888**参数：** 889 890| 参数名 | 类型 | 必填 | 说明 | 891| ------ | ------- | ---- | ---------------------------- | 892| x | number | 是 | 指定位置的x坐标。<br>单位：vp | 893| y | number | 是 | 指定位置的y坐标。<br>单位：vp | 894 895**示例：** 896 ```html 897 <!-- xxx.hml --> 898 <div> 899 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 900 </div> 901 ``` 902 903 ```js 904 //xxx.js 905 export default { 906 onShow() { 907 const el = this.$refs.canvas; 908 const ctx = el.getContext('2d'); 909 ctx.beginPath(); 910 ctx.moveTo(10, 10); 911 ctx.lineTo(280, 160); 912 ctx.stroke(); 913 } 914 } 915 ``` 916 917  918 919 920### lineTo 921lineTo(x: number, y: number): void 922 923从当前点到指定点进行路径连接。 924 925**系统能力：** SystemCapability.ArkUI.ArkUI.Full 926 927**参数：** 928 929| 参数名 | 类型 | 必填 | 说明 | 930| ------ | ------- | ---- | ---------------------------- | 931| x | number | 是 | 指定位置的x坐标。<br>单位：vp | 932| y | number | 是 | 指定位置的y坐标。<br>单位：vp | 933 934**示例：** 935 ```html 936 <!-- xxx.hml --> 937 <div> 938 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 939 </div> 940 ``` 941 942 ```js 943 //xxx.js 944 export default { 945 onShow() { 946 const el = this.$refs.canvas; 947 const ctx = el.getContext('2d'); 948 ctx.beginPath(); 949 ctx.moveTo(10, 10); 950 ctx.lineTo(280, 160); 951 ctx.stroke(); 952 } 953 } 954 ``` 955 956  957 958 959### closePath 960closePath(): void 961 962结束当前路径形成一个封闭路径。 963 964**系统能力：** SystemCapability.ArkUI.ArkUI.Full 965 966**示例：** 967 ```html 968 <!-- xxx.hml --> 969 <div> 970 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 971 </div> 972 ``` 973 974 ```js 975 //xxx.js 976 export default { 977 onShow() { 978 const el = this.$refs.canvas; 979 const ctx = el.getContext('2d'); 980 ctx.beginPath(); 981 ctx.moveTo(30, 30); 982 ctx.lineTo(110, 30); 983 ctx.lineTo(70, 90); 984 ctx.closePath(); 985 ctx.stroke(); 986 } 987 } 988 ``` 989 990  991 992### createPattern 993 994createPattern(image: Image, repetition: string): Object 995 996通过指定图像和重复方式创建图片填充的模板。 997 998**系统能力：** SystemCapability.ArkUI.ArkUI.Full 999 1000**参数：** 1001 1002| 参数名 | 类型 | 必填 | 说明 | 1003| ------ | ------- | ---- | ---------------------------- | 1004| image | Image | 是 | 图源对象，具体参考[Image对象](js-components-canvas-image.md)。 | 1005| repetition | string | 是 | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 | 1006 1007**返回值：** 1008 1009| 类型 | 说明 | 1010| ------ | ----------------- | 1011| Object | 指定图像填充的Pattern对象。 | 1012 1013**示例：** 1014 ```html 1015 <!-- xxx.hml --> 1016 <div> 1017 <canvas ref="canvas" style="width: 1000px; height: 1000px;"></canvas> 1018 </div> 1019 ``` 1020 1021 ```js 1022 //xxx.js 1023 export default { 1024 onShow() { 1025 const el = this.$refs.canvas; 1026 const ctx = el.getContext('2d'); 1027 var img = new Image(); 1028 // 'common/images/example.jpg'需要替换为开发者所需的图像资源文件 1029 img.src = 'common/images/example.jpg'; 1030 var pat = ctx.createPattern(img, 'repeat'); 1031 ctx.fillStyle = pat; 1032 ctx.fillRect(0, 0, 500, 500); 1033 } 1034 } 1035 ``` 1036 1037  1038 1039### bezierCurveTo 1040 1041bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 1042 1043创建三次贝赛尔曲线的路径。 1044 1045**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1046 1047**参数：** 1048 1049| 参数名 | 类型 | 必填 | 说明 | 1050| ------ | ------- | ---- | ---------------------------- | 1051| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。 | 1052| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。 | 1053| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。 | 1054| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。 | 1055| x | number | 是 | 路径结束时的x坐标值。 | 1056| y | number | 是 | 路径结束时的y坐标值。 | 1057 1058**示例：** 1059 ```html 1060 <!-- xxx.hml --> 1061 <div> 1062 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1063 </div> 1064 ``` 1065 1066 ```js 1067 //xxx.js 1068 export default { 1069 onShow() { 1070 const el = this.$refs.canvas; 1071 const ctx = el.getContext('2d'); 1072 ctx.beginPath(); 1073 ctx.moveTo(10, 10); 1074 ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); 1075 ctx.stroke(); 1076 } 1077 } 1078 ``` 1079 1080  1081 1082### quadraticCurveTo 1083 1084quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 1085 1086创建二次贝赛尔曲线的路径。 1087 1088**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1089 1090**参数：** 1091 1092| 参数名 | 类型 | 必填 | 说明 | 1093| ------ | ------- | ---- | ---------------------------- | 1094| cpx | number | 是 | 贝塞尔参数的x坐标值。 | 1095| cpy | number | 是 | 贝塞尔参数的y坐标值。 | 1096| x | number | 是 | 路径结束时的x坐标值。 | 1097| y | number | 是 | 路径结束时的y坐标值。 | 1098 1099**示例：** 1100 ```html 1101 <!-- xxx.hml --> 1102 <div> 1103 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 1104 </div> 1105 ``` 1106 1107 ```js 1108 //xxx.js 1109 export default { 1110 onShow() { 1111 const el = this.$refs.canvas; 1112 const ctx = el.getContext('2d'); 1113 ctx.beginPath(); 1114 ctx.moveTo(20, 20); 1115 ctx.quadraticCurveTo(100, 100, 200, 20); 1116 ctx.stroke(); 1117 } 1118 } 1119 ``` 1120 1121  1122 1123 1124### arc 1125arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void 1126 1127绘制弧线路径。 1128 1129**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1130 1131**参数：** 1132 1133| 参数名 | 类型 | 必填 | 说明 | 1134| ------ | ------- | ---- | ---------------------------- | 1135| x | number | 是 | 弧线圆心的x坐标值。 | 1136| y | number | 是 | 弧线圆心的y坐标值。 | 1137| radius | number | 是 | 弧线的圆半径。 | 1138| startAngle | number | 是 | 弧线的起始弧度。 | 1139| endAngle | number | 是 | 弧线的终止弧度。 | 1140| anticlockwise | boolean | 否 | 是否逆时针绘制圆弧，true为逆时针，false为顺时针。<br/>默认值：false | 1141 1142**示例：** 1143 ```html 1144 <!-- xxx.hml --> 1145 <div> 1146 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1147 </div> 1148 ``` 1149 1150 ```js 1151 //xxx.js 1152 export default { 1153 onShow() { 1154 const el = this.$refs.canvas; 1155 const ctx = el.getContext('2d'); 1156 ctx.beginPath(); 1157 ctx.arc(100, 75, 50, 0, 6.28); 1158 ctx.stroke(); 1159 } 1160 } 1161 ``` 1162 1163  1164 1165### arcTo 1166 1167arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 1168 1169依据圆弧经过的点和圆弧半径创建圆弧路径。 1170 1171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1172 1173**参数：** 1174 1175| 参数名 | 类型 | 必填 | 说明 | 1176| ------ | ------- | ---- | ---------------------------- | 1177| x1 | number | 是 | 圆弧经过的第一个点的x坐标值。 | 1178| y1 | number | 是 | 圆弧经过的第一个点的y坐标值。 | 1179| x2 | number | 是 | 圆弧经过的第二个点的x坐标值。 | 1180| y2 | number | 是 | 圆弧经过的第二个点的y坐标值。 | 1181| radius | number | 是 | 圆弧的圆半径值。 | 1182 1183**示例：** 1184 ```html 1185 <!-- xxx.hml --> 1186 <div> 1187 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1188 </div> 1189 ``` 1190 1191 ```js 1192 //xxx.js 1193 export default { 1194 onShow() { 1195 const el = this.$refs.canvas; 1196 const ctx = el.getContext('2d'); 1197 ctx.moveTo(100, 20); 1198 ctx.arcTo(150, 20, 150, 70, 50); // Create an arc 1199 ctx.stroke(); 1200 } 1201 } 1202 ``` 1203 1204  1205 1206### ellipse<sup>6+</sup> 1207 1208ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number): void 1209 1210在规定的矩形区域绘制一个椭圆。 1211 1212**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1213 1214**参数：** 1215 1216| 参数名 | 类型 | 必填 | 说明 | 1217| ------ | ------- | ---- | ---------------------------- | 1218| x | number | 是 | 椭圆圆心的x轴坐标。 | 1219| y | number | 是 | 椭圆圆心的y轴坐标。 | 1220| radiusX | number | 是 | 椭圆x轴的半径长度。 | 1221| radiusY | number | 是 | 椭圆y轴的半径长度。 | 1222| rotation | number | 是 | 椭圆的旋转角度，单位为弧度。 | 1223| startAngle | number | 是 | 椭圆绘制的起始点角度，以弧度表示。 | 1224| endAngle | number | 是 | 椭圆绘制的结束点角度，以弧度表示。 | 1225| anticlockwise | number | 否 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。其它数值均按默认值处理。<br/>默认值：0 | 1226 1227**示例：** 1228 ```html 1229 <!-- xxx.hml --> 1230 <div> 1231 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 1232 </div> 1233 ``` 1234 1235 ```js 1236 //xxx.js 1237 export default { 1238 onShow() { 1239 const el = this.$refs.canvas; 1240 const ctx = el.getContext('2d'); 1241 ctx.beginPath(); 1242 ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); 1243 ctx.stroke(); 1244 } 1245 } 1246 ``` 1247 1248  1249 1250 1251### rect 1252rect(x: number, y: number, width: number, height: number): void 1253 1254创建矩形路径。 1255 1256**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1257 1258**参数：** 1259 1260| 参数名 | 类型 | 必填 | 说明 | 1261| ------ | ------- | ---- | ---------------------------- | 1262| x | number | 是 | 指定矩形的左上角x坐标值。 | 1263| y | number | 是 | 指定矩形的左上角y坐标值。 | 1264| width | number | 是 | 指定矩形的宽度。 | 1265| height | number | 是 | 指定矩形的高度。 | 1266 1267**示例：** 1268 ```html 1269 <!-- xxx.hml --> 1270 <div> 1271 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 1272 </div> 1273 ``` 1274 1275 ```js 1276 //xxx.js 1277 export default { 1278 onShow() { 1279 const el = this.$refs.canvas; 1280 const ctx = el.getContext('2d'); 1281 ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) 1282 ctx.stroke(); // Draw it 1283 } 1284 } 1285 ``` 1286 1287  1288 1289### fill 1290 1291fill(): void 1292 1293对封闭路径进行填充。 1294 1295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1296 1297**示例：** 1298 ```html 1299 <!-- xxx.hml --> 1300 <div> 1301 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1302 </div> 1303 ``` 1304 1305 ```js 1306 //xxx.js 1307 export default { 1308 onShow() { 1309 const el = this.$refs.canvas; 1310 const ctx = el.getContext('2d'); 1311 ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) 1312 ctx.fill(); // Draw it in default setting 1313 } 1314 } 1315 ``` 1316 1317  1318 1319### clip 1320 1321clip(): void 1322 1323设置当前路径为剪切路径。 1324 1325**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1326 1327**示例：** 1328 ```html 1329 <!-- xxx.hml --> 1330 <div> 1331 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1332 </div> 1333 ``` 1334 1335 ```js 1336 //xxx.js 1337 export default { 1338 onShow() { 1339 const el = this.$refs.canvas; 1340 const ctx = el.getContext('2d'); 1341 ctx.rect(0, 0, 200, 200); 1342 ctx.stroke(); 1343 ctx.clip(); 1344 // Draw red rectangle after clip 1345 ctx.fillStyle = "rgb(255,0,0)"; 1346 ctx.fillRect(0, 0, 150, 150); 1347 } 1348 } 1349 ``` 1350 1351  1352 1353### rotate 1354 1355rotate(rotate: number): void 1356 1357针对当前坐标轴进行顺时针旋转。 1358 1359**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1360 1361**参数：** 1362 1363| 参数名 | 类型 | 必填 | 说明 | 1364| ------ | ------- | ---- | ---------------------------- | 1365| rotate | number | 是 | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 | 1366 1367**示例：** 1368 ```html 1369 <!-- xxx.hml --> 1370 <div> 1371 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1372 </div> 1373 ``` 1374 1375 ```js 1376 //xxx.js 1377 export default { 1378 onShow() { 1379 const el = this.$refs.canvas; 1380 const ctx = el.getContext('2d'); 1381 ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees 1382 ctx.fillRect(70, 20, 50, 50); 1383 } 1384 } 1385 ``` 1386 1387  1388 1389### scale 1390 1391scale(x: number, y: number): void 1392 1393设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 1394 1395**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1396 1397**参数：** 1398 1399| 参数名 | 类型 | 必填 | 说明 | 1400| ------ | ------- | ---- | ---------------------------- | 1401| x | number | 是 | 设置水平方向的缩放值。 | 1402| y | number | 是 | 设置垂直方向的缩放值。 | 1403 1404**示例：** 1405 ```html 1406 <!-- xxx.hml --> 1407 <div> 1408 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1409 </div> 1410 ``` 1411 1412 ```js 1413 //xxx.js 1414 export default { 1415 onShow() { 1416 const el = this.$refs.canvas; 1417 const ctx = el.getContext('2d'); 1418 ctx.strokeRect(10, 10, 25, 25); 1419 ctx.scale(2, 2);// Scale to 200% 1420 ctx.strokeRect(10, 10, 25, 25); 1421 } 1422 } 1423 ``` 1424 1425  1426 1427### transform 1428 1429transform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void 1430 1431transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 1432 1433> **说明：** 1434> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： 1435> 1436> - x' = scaleX \* x + skewY \* y + translateX 1437> 1438> - y' = skewX \* x + scaleY \* y + translateY 1439 1440**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1441 1442**参数：** 1443 1444| 参数名 | 类型 | 必填 | 说明 | 1445| ------ | ------- | ---- | ---------------------------- | 1446| scaleX | number | 是 | 指定水平缩放值。 | 1447| skewX | number | 是 | 指定水平倾斜值。 | 1448| skewY | number | 是 | 指定垂直倾斜值。 | 1449| scaleY | number | 是 | 指定垂直缩放值。 | 1450| translateX | number | 是 | 指定水平移动值。 | 1451| translateY | number | 是 | 指定垂直移动值。 | 1452 1453**示例：** 1454 ```html 1455 <!-- xxx.hml --> 1456 <div> 1457 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1458 </div> 1459 ``` 1460 1461 ```js 1462 //xxx.js 1463 export default { 1464 onShow() { 1465 const el = this.$refs.canvas; 1466 const ctx = el.getContext('2d'); 1467 ctx.fillStyle = 'rgb(0,0,0)'; 1468 ctx.fillRect(0, 0, 100, 100); 1469 ctx.transform(1, 0.5, -0.5, 1, 10, 10); 1470 ctx.fillStyle = 'rgb(255,0,0)'; 1471 ctx.fillRect(0, 0, 100, 100); 1472 ctx.transform(1, 0.5, -0.5, 1, 10, 10); 1473 ctx.fillStyle = 'rgb(0,0,255)'; 1474 ctx.fillRect(0, 0, 100, 100); 1475 } 1476 } 1477 ``` 1478 1479  1480 1481### setTransform 1482 1483setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void 1484 1485setTransform方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 1486 1487**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1488 1489**参数：** 1490 1491| 参数名 | 类型 | 必填 | 说明 | 1492| ------ | ------- | ---- | ---------------------------- | 1493| scaleX | number | 是 | 指定水平缩放值。 | 1494| skewX | number | 是 | 指定水平倾斜值。 | 1495| skewY | number | 是 | 指定垂直倾斜值。 | 1496| scaleY | number | 是 | 指定垂直缩放值。 | 1497| translateX | number | 是 | 指定水平移动值。 | 1498| translateY | number | 是 | 指定垂直移动值。 | 1499 1500**示例：** 1501 ```html 1502 <!-- xxx.hml --> 1503 <div> 1504 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1505 </div> 1506 ``` 1507 1508 ```js 1509 //xxx.js 1510 export default { 1511 onShow() { 1512 const el = this.$refs.canvas; 1513 const ctx = el.getContext('2d'); 1514 ctx.fillStyle = 'rgb(255,0,0)'; 1515 ctx.fillRect(0, 0, 100, 100); 1516 ctx.setTransform(1,0.5, -0.5, 1, 10, 10); 1517 ctx.fillStyle = 'rgb(0,0,255)'; 1518 ctx.fillRect(0, 0, 100, 100); 1519 } 1520 } 1521 ``` 1522 1523  1524 1525### translate 1526 1527translate(x: number, y: number): void 1528 1529移动当前坐标系的原点。 1530 1531**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1532 1533**参数：** 1534 1535| 参数名 | 类型 | 必填 | 说明 | 1536| ------ | ------- | ---- | ---------------------------- | 1537| x | number | 是 | 设置水平平移量。 | 1538| y | number | 是 | 设置竖直平移量。 | 1539 1540**示例：** 1541 ```html 1542 <!-- xxx.hml --> 1543 <div> 1544 <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas> 1545 </div> 1546 ``` 1547 1548 ```js 1549 //xxx.js 1550 export default { 1551 onShow() { 1552 const el = this.$refs.canvas; 1553 const ctx = el.getContext('2d'); 1554 ctx.fillRect(10, 10, 50, 50); 1555 ctx.translate(70, 70); 1556 ctx.fillRect(10, 10, 50, 50); 1557 } 1558 } 1559 ``` 1560 1561  1562 1563### createPath2D<sup>6+</sup> 1564 1565createPath2D(path: Path2D, cmds: string): Path2D 1566 1567创建一个Path2D对象。 1568 1569**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1570 1571**参数：** 1572 1573| 参数名 | 类型 | 必填 | 说明 | 1574| ------ | ------- | ---- | ---------------------------- | 1575| path | Path2D | 是 | Path2D对象。 | 1576| cmds | string | 是 | SVG的Path描述字符串。 | 1577 1578**返回值：** 1579 1580 [Path2D对象](js-components-canvas-path2d.md) 1581 1582**示例：** 1583 ```html 1584 <!-- xxx.hml --> 1585 <div> 1586 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 1587 </div> 1588 ``` 1589 1590 ```js 1591 //xxx.js 1592 export default { 1593 onShow() { 1594 const el = this.$refs.canvas; 1595 const ctx = el.getContext('2d'); 1596 var path1 = ctx.createPath2D(); 1597 path1.moveTo(100, 100); 1598 path1.lineTo(200, 100); 1599 path1.lineTo(100, 200); 1600 path1.closePath(); 1601 ctx.stroke(path1); 1602 var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z"); 1603 ctx.stroke(path2); 1604 var path3 = ctx.createPath2D(path2); 1605 ctx.stroke(path3); 1606 } 1607 } 1608 ``` 1609 1610  1611 1612### drawImage 1613 1614drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void 1615 1616进行图像绘制。 1617 1618**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1619 1620**参数：** 1621 1622| 参数名 | 类型 | 必填 | 说明 | 1623| ------ | ------- | ---- | ---------------------------- | 1624| image | Image \| PixelMap<sup>9+</sup> | 是 | 图片资源，请参考[Image对象](js-components-canvas-image.md) 或[PixelMap对象](../../apis-image-kit/arkts-apis-image-PixelMap.md)。 | 1625| sx | number | 是 | 裁切源图像时距离源图像左上角的x坐标值。 | 1626| sy | number | 是 | 裁切源图像时距离源图像左上角的y坐标值。 | 1627| sWidth | number | 是 | 裁切源图像时需要裁切的宽度。 | 1628| sHeight | number | 是 | 裁切源图像时需要裁切的高度。 | 1629| dx | number | 是 | 绘制区域左上角在x轴的位置。 | 1630| dy | number | 是 | 绘制区域左上角在y 轴的位置。 | 1631| dWidth | number | 是 | 绘制区域的宽度。 | 1632| dHeight | number | 是 | 绘制区域的高度。 | 1633 1634**示例：** 1635 ```html 1636 <!-- xxx.hml --> 1637 <div> 1638 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 1639 </div> 1640 ``` 1641 1642 ```js 1643 //xxx.js 1644 export default { 1645 onShow() { 1646 var test = this.$refs.canvas; 1647 var ctx = test.getContext('2d'); 1648 var img = new Image(); 1649 // 'common/image/test.jpg'需要替换为开发者所需的图像资源文件 1650 img.src = 'common/image/test.jpg'; 1651 ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 200); 1652 } 1653 } 1654 ``` 1655 1656  1657 1658### restore 1659 1660restore(): void 1661 1662对保存的绘图上下文进行恢复。 1663 1664**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1665 1666**示例：** 1667 ```html 1668 <!-- xxx.hml --> 1669 <div> 1670 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 1671 </div> 1672 ``` 1673 1674 ```js 1675 //xxx.js 1676 export default { 1677 onShow() { 1678 const el = this.$refs.canvas; 1679 const ctx = el.getContext('2d'); 1680 ctx.restore(); 1681 } 1682 } 1683 ``` 1684 1685### save 1686 1687save(): void 1688 1689对当前的绘图上下文进行保存。 1690 1691**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1692 1693**示例：** 1694 ```html 1695 <!-- xxx.hml --> 1696 <div> 1697 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 1698 </div> 1699 ``` 1700 1701 ```js 1702 //xxx.js 1703 export default { 1704 onShow() { 1705 const el = this.$refs.canvas; 1706 const ctx = el.getContext('2d'); 1707 ctx.save(); 1708 } 1709 } 1710 ``` 1711 1712### createLinearGradient<sup>6+</sup> 1713 1714createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object 1715 1716创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](js-components-canvas-canvasgradient.md)。 1717 1718**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1719 1720**参数：** 1721 1722| 参数名 | 类型 | 必填 | 说明 | 1723| ------ | ------- | ---- | ---------------------------- | 1724| x0 | number | 是 | 起点的x轴坐标。 | 1725| y0 | number | 是 | 起点的y轴坐标。 | 1726| x1 | number | 是 | 终点的x轴坐标。 | 1727| y1 | number | 是 | 终点的y轴坐标。 | 1728 1729**返回值：** 1730 1731| 类型 | 说明 | 1732| ------ | ---------------------- | 1733| Object | 返回创建的CanvasGradient对象。 | 1734 1735**示例：** 1736 ```html 1737 <!-- xxx.hml --> 1738 <div> 1739 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 1740 <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> 1741 </div> 1742 ``` 1743 1744 ```js 1745 // xxx.js 1746 export default { 1747 handleClick() { 1748 const el = this.$refs.canvas; 1749 const ctx = el.getContext('2d'); 1750 // Linear gradient: start(50,0) end(300,100) 1751 var gradient = ctx.createLinearGradient(50,0, 300,100); 1752 // Add three color stops 1753 gradient.addColorStop(0.0, '#ff0000'); 1754 gradient.addColorStop(0.5, '#ffffff'); 1755 gradient.addColorStop(1.0, '#00ff00'); 1756 // Set the fill style and draw a rectangle 1757 ctx.fillStyle = gradient; 1758 ctx.fillRect(0, 0, 500, 500); 1759 } 1760 } 1761 ``` 1762 1763  1764 1765### createRadialGradient<sup>6+</sup> 1766 1767createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): Object 1768 1769创建一个径向渐变色，返回CanvasGradient对象，请参考CanvasGradient。 1770 1771**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1772 1773**参数：** 1774 1775| 参数名 | 类型 | 必填 | 说明 | 1776| ------ | ------- | ---- | ---------------------------- | 1777| x0 | number | 是 | 起始圆的x轴坐标。 | 1778| y0 | number | 是 | 起始圆的y轴坐标。 | 1779| r0 | number | 是 | 起始圆的半径。必须是非负且有限的。 | 1780| x1 | number | 是 | 终点圆的x轴坐标。 | 1781| y1 | number | 是 | 终点圆的y轴坐标。 | 1782| r1 | number | 是 | 终点圆的半径。必须为非负且有限的。 | 1783 1784**返回值：** 1785 1786| 类型 | 说明 | 1787| ------ | ---------------------- | 1788| Object | 返回创建的CanvasGradient对象。 | 1789 1790**示例：** 1791 ```html 1792 <!-- xxx.hml --> 1793 <div> 1794 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 1795 <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> 1796 </div> 1797 ``` 1798 1799 ```js 1800 // xxx.js 1801 export default { 1802 handleClick() { 1803 const el = this.$refs.canvas; 1804 const ctx = el.getContext('2d'); 1805 // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200) 1806 var gradient = ctx.createRadialGradient(200,200,50, 200,200,200); 1807 // Add three color stops 1808 gradient.addColorStop(0.0, '#ff0000'); 1809 gradient.addColorStop(0.5, '#ffffff'); 1810 gradient.addColorStop(1.0, '#00ff00'); 1811 // Set the fill style and draw a rectangle 1812 ctx.fillStyle = gradient; 1813 ctx.fillRect(0, 0, 500, 500); 1814 } 1815 } 1816 ``` 1817 1818  1819 1820### createImageData 1821 1822createImageData(width: number, height: number): ImageData 1823 1824创建新的ImageData对象，请参考[ImageData对象](js-components-canvas-imagedata.md)。 1825 1826**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1827 1828**参数：** 1829 1830| 参数名 | 类型 | 必填 | 说明 | 1831| --------- | ------ | ------ |----------------- | 1832| width | number | 是 | ImageData的宽度。 | 1833| height | number | 是 | ImageData的高度。 | 1834 1835**返回值：** 1836 1837| 类型 | 说明 | 1838| ------ | ----------------- | 1839| [ImageData](js-components-canvas-imagedata.md) | 返回创建的ImageData对象。 | 1840 1841**示例：** 1842 ```html 1843 <!-- xxx.hml --> 1844 <div> 1845 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 1846 </div> 1847 ``` 1848 1849 ```js 1850 //xxx.js 1851 export default { 1852 onShow() { 1853 const el = this.$refs.canvas; 1854 const ctx = el.getContext('2d'); 1855 var imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height 1856 } 1857 } 1858 ``` 1859 1860### createImageData 1861 1862createImageData(imageData: ImageData): ImageData 1863 1864创建新的ImageData对象，请参考[ImageData对象](js-components-canvas-imagedata.md)。 1865 1866**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1867 1868**参数：** 1869 1870| 参数名 | 类型 | 必填 | 说明 | 1871| --------- | ------ | ------ |----------------- | 1872| imageData | [ImageData](js-components-canvas-imagedata.md) | 是 |复制现有的ImageData对象。 | 1873 1874**返回值：** 1875 1876| 类型 | 说明 | 1877| ------ | ----------------- | 1878| [ImageData](js-components-canvas-imagedata.md) | 返回创建的ImageData对象。 | 1879 1880**示例：** 1881 ```html 1882 <!-- xxx.hml --> 1883 <div> 1884 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 1885 </div> 1886 ``` 1887 1888 ```js 1889 //xxx.js 1890 export default { 1891 onShow() { 1892 const el = this.$refs.canvas; 1893 const ctx = el.getContext('2d'); 1894 var imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height 1895 var newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData 1896 } 1897 } 1898 ``` 1899 1900### getImageData 1901 1902getImageData(sx: number, sy: number, sw: number, sh: number): ImageData 1903 1904以当前canvas指定区域内的像素创建[ImageData对象](js-components-canvas-imagedata.md)。 1905 1906**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1907 1908**参数：** 1909 1910| 参数名 | 类型 | 必填 | 说明 | 1911| ------ | ------- | ---- | ---------------------------- | 1912| sx | number | 是 | 需要输出的区域的左上角x坐标。 | 1913| sy | number | 是 | 需要输出的区域的左上角y坐标。 | 1914| sw | number | 是 | 需要输出的区域的宽度。 | 1915| sh | number | 是 | 需要输出的区域的高度。 | 1916 1917**返回值：** 1918 1919| 类型 | 说明 | 1920| ------ | ----------------------- | 1921| [ImageData](js-components-canvas-imagedata.md) | 返回包含指定区域像素的ImageData对象。 | 1922 1923**示例：** 1924 ```html 1925 <!-- xxx.hml --> 1926 <div> 1927 <canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 1928 </div> 1929 ``` 1930 1931 ```js 1932 //xxx.js 1933 export default { 1934 onShow() { 1935 const test = this.$element('getImageData') 1936 const ctx = test.getContext('2d'); 1937 var imageData = ctx.getImageData(0, 0, 280, 300); 1938 } 1939 } 1940 ``` 1941 1942### putImageData 1943 1944putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void 1945 1946使用ImageData数据填充新的矩形区域。 1947 1948**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1949 1950**参数：** 1951 1952| 参数名 | 类型 | 必填 | 说明 | 1953| ------ | ------- | ---- | ---------------------------- | 1954| imageData | [ImageData](js-components-canvas-imagedata.md) | 是 | 包含像素值的ImageData对象。 | 1955| dx | number | 是 | 填充区域在x轴方向的偏移量。 | 1956| dy | number | 是 | 填充区域在y轴方向的偏移量。 | 1957| dirtyX | number | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 | 1958| dirtyY | number | 是 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 | 1959| dirtyWidth | number | 是 | 源图像数据矩形裁切范围的宽度。 | 1960| dirtyHeight | number | 是 | 源图像数据矩形裁切范围的高度。 | 1961 1962**示例：** 1963 ```html 1964 <!-- xxx.hml --> 1965 <div> 1966 <canvas id="putImageData" style="width: 200px; height: 150px; background-color: #D5D5D5;"></canvas> 1967 </div> 1968 ``` 1969 1970 ```js 1971 //xxx.js 1972 export default { 1973 onShow() { 1974 const test = this.$element('putImageData') 1975 const ctx = test.getContext('2d'); 1976 var imgData = ctx.createImageData(100, 100); 1977 for (var i = 0; i < imgData.data.length; i += 4) { 1978 imgData.data[i + 0] = 39; 1979 imgData.data[i + 1] = 135; 1980 imgData.data[i + 2] = 217; 1981 imgData.data[i + 3] = 255; 1982 } 1983 ctx.putImageData(imgData, 10, 10, 0, 0, 100, 50); 1984 } 1985 } 1986 ``` 1987 1988 1989### putImageData 1990 1991putImageData(imageData: ImageData, dx: number, dy: number): void 1992 1993使用ImageData数据填充新的矩形区域。 1994 1995**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1996 1997**参数：** 1998 1999| 参数名 | 类型 | 必填 | 说明 | 2000| ------ | ------- | ---- | ---------------------------- | 2001| imageData | [ImageData](js-components-canvas-imagedata.md) | 是 | 包含像素值的ImageData对象。 | 2002| dx | number | 是 | 填充区域在x轴方向的偏移量。 | 2003| dy | number | 是 | 填充区域在y轴方向的偏移量。 | 2004 2005**示例：** 2006 ```html 2007 <!-- xxx.hml --> 2008 <div> 2009 <canvas id="putImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 2010 </div> 2011 ``` 2012 2013 ```js 2014 //xxx.js 2015 export default { 2016 onShow() { 2017 const test = this.$element('putImageData') 2018 const ctx = test.getContext('2d'); 2019 var imgData = ctx.createImageData(100, 100); 2020 for (var i = 0; i < imgData.data.length; i += 4) { 2021 imgData.data[i + 0] = 255; 2022 imgData.data[i + 1] = 0; 2023 imgData.data[i + 2] = 0; 2024 imgData.data[i + 3] = 255; 2025 } 2026 ctx.putImageData(imgData, 10, 10); 2027 } 2028 } 2029 ``` 2030 2031  2032 2033### getPixelMap<sup>9+</sup> 2034 2035getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 2036 2037获取用当前canvas指定区域内的像素创建的PixelMap对象。 2038 2039**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2040 2041**参数：** 2042 2043| 参数名 | 类型 | 必填 | 说明 | 2044| ------ | ------- | ---- | ---------------------------- | 2045| sx | number | 是 | 指定区域的左上角x坐标。 | 2046| sy | number | 是 | 指定区域的左上角y坐标。 | 2047| sw | number | 是 | 指定区域的宽度。 | 2048| sh | number | 是 | 指定区域的高度。 | 2049 2050**返回值：** 2051 2052| 类型 | 说明 | 2053| ---------------------------------------- | ---------------------- | 2054| [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 返回包含指定区域像素的PixelMap对象。 | 2055 2056**示例：** 2057 2058 ```html 2059 <!-- xxx.hml --> 2060 <div> 2061 <canvas id="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 2062 </div> 2063 ``` 2064 2065 ```js 2066 //xxx.js 2067 export default { 2068 onShow() { 2069 const test = this.$element('canvasId') 2070 const ctx = test.getContext('2d'); 2071 var pixelMap = ctx.getPixelMap(0, 0, 280, 300); 2072 } 2073 } 2074 ``` 2075 2076### setLineDash 2077 2078setLineDash(segments: Array): void 2079 2080设置画布的虚线样式。 2081 2082**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2083 2084**参数：** 2085 2086| 参数名 | 类型 | 必填 | 说明 | 2087| ------ | ------- | ---- | ---------------------------- | 2088| segments | Array | 是 | 作为数组用来描述线段如何交替和间距长度。 | 2089 2090**示例：** 2091 ```html 2092 <!-- xxx.hml --> 2093 <div> 2094 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 2095 </div> 2096 ``` 2097 2098 ```js 2099 //xxx.js 2100 export default { 2101 onShow() { 2102 const el = this.$refs.canvas; 2103 const ctx = el.getContext('2d'); 2104 ctx.arc(100, 75, 50, 0, 6.28); 2105 ctx.setLineDash([10,20]); 2106 ctx.stroke(); 2107 } 2108 } 2109 ``` 2110 2111  2112 2113### getLineDash 2114 2115getLineDash(): Array 2116 2117获得当前画布的虚线样式。 2118 2119**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2120 2121**返回值：** 2122 2123| 类型 | 说明 | 2124| ----- | ------------------------ | 2125| Array | 返回数组，该数组用来描述线段如何交替和间距长度。 | 2126 2127**示例：** 2128 ```html 2129 <!-- xxx.hml --> 2130 <div> 2131 <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas> 2132 </div> 2133 ``` 2134 2135 ```js 2136 //xxx.js 2137 export default { 2138 onShow() { 2139 const el = this.$refs.canvas; 2140 const ctx = el.getContext('2d'); 2141 var info = ctx.getLineDash(); 2142 } 2143 } 2144 ``` 2145 2146### transferFromImageBitmap<sup>7+</sup> 2147 2148transferFromImageBitmap(bitmap: ImageBitmap): void 2149 2150显示给定的[ImageBitmap对象](js-components-canvas-imagebitmap.md)。 2151 2152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 2153 2154**参数：** 2155 2156| 参数名 | 类型 | 必填 | 说明 | 2157| ------ | ------- | ---- | ---------------------------- | 2158| bitmap | [ImageBitmap](js-components-canvas-imagebitmap.md) | 是 | 待显示的ImageBitmap对象。 | 2159 2160**示例：** 2161 ```html 2162 <!-- xxx.hml --> 2163 <div> 2164 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 2165 </div> 2166 ``` 2167 2168 ```js 2169 //xxx.js 2170 export default { 2171 onShow() { 2172 const el = this.$refs.canvas; 2173 const ctx = el.getContext('2d'); 2174 var canvas = this.$refs.canvas.getContext('2d'); 2175 var offscreen = new OffscreenCanvas(500,500); 2176 var offscreenCanvasCtx = offscreen.getContext("2d"); 2177 offscreenCanvasCtx.fillRect(0, 0, 200, 200); 2178 2179 var bitmap = offscreen.transferToImageBitmap(); 2180 canvas.transferFromImageBitmap(bitmap); 2181 } 2182 } 2183 ``` 2184 2185 
