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