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