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