1# Path2D对象 2 3> **说明：** 4> 从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。 7 8 9## addPath 10 11addPath(path: Object): void 12 13将另一个路径添加到当前的路径对象中。 14 15**参数：** 16 17| 参数 | 类型 | 描述 | 18| ---- | ------ | -------------- | 19| path | Object | 需要添加到当前路径的路径对象 | 20 21**示例：** 22 23 ```html 24<!-- xxx.hml --> 25<div> 26 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 27</div> 28 ``` 29 30 ```js 31// xxx.js 32export default { 33 onShow() { 34 const el = this.$refs.canvas; 35 const ctx = el.getContext('2d'); 36 var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); 37 var path2 = ctx.createPath2D(); 38 path2.addPath(path1); 39 ctx.stroke(path2); 40 } 41} 42 ``` 43 44  45 46## setTransform 47 48setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void 49 50设置路径变换矩阵。 51 52**参数：** 53 54| 参数 | 类型 | 描述 | 55| ---------- | ------ | ------- | 56| scaleX | number | x轴的缩放比例 | 57| skewX | number | x轴的倾斜角度 | 58| skewY | number | y轴的倾斜角度 | 59| scaleY | number | y轴的缩放比例 | 60| translateX | number | x轴的平移距离 | 61| translateY | number | y轴的平移距离 | 62 63**示例：** 64 65 ```html 66<!-- xxx.hml --> 67<div> 68 <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas> 69</div> 70 ``` 71 72 ```js 73// xxx.js 74export default { 75 onShow() { 76 const el = this.$refs.canvas; 77 const ctx = el.getContext('2d'); 78 var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); 79 path.setTransform(0.8, 0, 0, 0.4, 0, 0); 80 ctx.stroke(path); 81 } 82} 83 ``` 84 85  86 87 88## closePath 89 90closePath(): void 91 92将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 93 94**示例：** 95 96 ```html 97<!-- xxx.hml --> 98<div> 99 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 100</div> 101 ``` 102 103 ```js 104// xxx.js 105export default { 106 onShow() { 107 const el = this.$refs.canvas; 108 const ctx = el.getContext('2d'); 109 var path = ctx.createPath2D(); 110 path.moveTo(200, 100); 111 path.lineTo(300, 100); 112 path.lineTo(200, 200); 113 path.closePath(); 114 ctx.stroke(path); 115 } 116} 117 ``` 118 119  120 121 122## moveTo 123 124moveTo(x: number, y: number): void 125 126将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 127 128**参数：** 129 130| 参数 | 类型 | 描述 | 131| ---- | ------ | ------- | 132| x | number | 目标点X轴坐标 | 133| y | number | 目标点Y轴坐标 | 134 135**示例：** 136 137 ```html 138<!-- xxx.hml --> 139<div> 140 <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas> 141</div> 142 ``` 143 144 ```js 145// xxx.js 146export default { 147 onShow() { 148 const el = this.$refs.canvas; 149 const ctx = el.getContext('2d'); 150 var path = ctx.createPath2D(); 151 path.moveTo(50, 100); 152 path.lineTo(250, 100); 153 path.lineTo(150, 200); 154 path.closePath(); 155 ctx.stroke(path); 156 } 157} 158 ``` 159 160  161 162 163## lineTo 164 165lineTo(x: number, y: number): void 166 167从当前点绘制一条直线到目标点。 168 169**参数：** 170 171| 参数 | 类型 | 描述 | 172| ---- | ------ | ------- | 173| x | number | 目标点X轴坐标 | 174| y | number | 目标点Y轴坐标 | 175 176**示例：** 177 178 ```html 179<!-- xxx.hml --> 180<div> 181 <canvas ref="canvas" style="width: 400px; height: 450px; background-color: #ffff00;"></canvas> 182</div> 183 ``` 184 185 ```js 186// xxx.js 187export default { 188 onShow() { 189 const el = this.$refs.canvas; 190 const ctx = el.getContext('2d'); 191 var path = ctx.createPath2D(); 192 path.moveTo(100, 100); 193 path.lineTo(100, 200); 194 path.lineTo(200, 200); 195 path.lineTo(200, 100); 196 path.closePath(); 197 ctx.stroke(path); 198 } 199} 200 ``` 201 202  203 204 205## bezierCurveTo 206 207bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 208 209创建三次贝赛尔曲线的路径。 210 211**参数：** 212 213| 参数 | 类型 | 描述 | 214| ---- | ------ | -------------- | 215| cp1x | number | 第一个贝塞尔参数的x坐标值。 | 216| cp1y | number | 第一个贝塞尔参数的y坐标值。 | 217| cp2x | number | 第二个贝塞尔参数的x坐标值。 | 218| cp2y | number | 第二个贝塞尔参数的y坐标值。 | 219| x | number | 路径结束时的x坐标值。 | 220| y | number | 路径结束时的y坐标值。 | 221 222**示例：** 223 224 ```html 225<!-- xxx.hml --> 226<div> 227 <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas> 228</div> 229 ``` 230 231 ```js 232// xxx.js 233export default { 234 onShow() { 235 const el = this.$refs.canvas; 236 const ctx = el.getContext('2d'); 237 var path = ctx.createPath2D(); 238 path.moveTo(10, 10); 239 path.bezierCurveTo(20, 100, 200, 100, 200, 20); 240 ctx.stroke(path); 241 } 242} 243 ``` 244 245  246 247 248## quadraticCurveTo 249 250quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 251 252创建二次贝赛尔曲线的路径。 253 254**参数：** 255 256| 参数 | 类型 | 描述 | 257| ---- | ------ | ----------- | 258| cpx | number | 贝塞尔参数的x坐标值。 | 259| cpy | number | 贝塞尔参数的y坐标值。 | 260| x | number | 路径结束时的x坐标值。 | 261| y | number | 路径结束时的y坐标值。 | 262 263**示例：** 264 265 ```html 266<!-- xxx.hml --> 267<div> 268 <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas> 269</div> 270 ``` 271 272 ```js 273// xxx.js 274export default { 275 onShow() { 276 const el = this.$refs.canvas; 277 const ctx = el.getContext('2d'); 278 var path = ctx.createPath2D(); 279 path.moveTo(10, 10); 280 path.quadraticCurveTo(100, 100, 200, 20); 281 ctx.stroke(path); 282 } 283} 284 ``` 285 286  287 288 289## arc 290 291arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number): void 292 293绘制弧线路径。 294 295**参数：** 296 297| 参数 | 类型 | 描述 | 298| ------------- | ------- | ---------- | 299| x | number | 弧线圆心的x坐标值。 | 300| y | number | 弧线圆心的y坐标值。 | 301| radius | number | 弧线的圆半径。 | 302| startAngle | number | 弧线的起始弧度。 | 303| endAngle | number | 弧线的终止弧度。 | 304| anticlockwise | boolean | 是否逆时针绘制圆弧。 | 305 306**示例：** 307 308 ```html 309<!-- xxx.hml --> 310<div> 311 <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas> 312</div> 313 ``` 314 315 ```js 316// xxx.js 317export default { 318 onShow() { 319 const el = this.$refs.canvas; 320 const ctx = el.getContext('2d'); 321 var path = ctx.createPath2D(); 322 path.arc(100, 75, 50, 0, 6.28); 323 ctx.stroke(path); 324 } 325} 326 ``` 327 328  329 330 331## arcTo 332 333arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 334 335依据圆弧经过的点和圆弧半径创建圆弧路径。 336 337**参数：** 338 339| 参数 | 类型 | 描述 | 340| ------ | ------ | --------------- | 341| x1 | number | 圆弧经过的第一个点的x坐标值。 | 342| y1 | number | 圆弧经过的第一个点的y坐标值。 | 343| x2 | number | 圆弧经过的第二个点的x坐标值。 | 344| y2 | number | 圆弧经过的第二个点的y坐标值。 | 345| radius | number | 圆弧的圆半径值。 | 346 347**示例：** 348 349 ```html 350<!-- xxx.hml --> 351<div> 352 <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas> 353</div> 354 ``` 355 356 ```js 357// xxx.js 358export default { 359 onShow() { 360 const el = this.$refs.canvas; 361 const ctx = el.getContext('2d'); 362 var path = ctx.createPath2D(); 363 path.arcTo(150, 20, 150, 70, 50); 364 ctx.stroke(path); 365 } 366} 367 ``` 368 369  370 371 372## ellipse 373 374ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void 375 376在规定的矩形区域绘制一个椭圆。 377 378**参数：** 379 380| 参数 | 类型 | 描述 | 381| ------------- | ------ | ------------------------------------ | 382| x | number | 椭圆圆心的x轴坐标。 | 383| y | number | 椭圆圆心的y轴坐标。 | 384| radiusX | number | 椭圆x轴的半径长度。 | 385| radiusY | number | 椭圆y轴的半径长度。 | 386| rotation | number | 椭圆的旋转角度，单位为弧度。 | 387| startAngle | number | 椭圆绘制的起始点角度，以弧度表示。 | 388| endAngle | number | 椭圆绘制的结束点角度，以弧度表示。 | 389| anticlockwise | number | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | 390 391**示例：** 392 393 ```html 394<!-- xxx.hml --> 395<div> 396 <canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas> 397</div> 398 ``` 399 400 ```js 401// xxx.js 402export default { 403 onShow() { 404 const el = this.$refs.canvas; 405 const ctx = el.getContext('2d'); 406 var path = ctx.createPath2D(); 407 path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); 408 ctx.stroke(path); 409 } 410} 411 ``` 412 413  414 415 416## rect 417 418rect(x: number, y: number, width: number, height: number): void 419 420创建矩形路径。 421 422**参数：** 423 424| 参数 | 类型 | 描述 | 425| ------ | ------ | ------------- | 426| x | number | 指定矩形的左上角x坐标值。 | 427| y | number | 指定矩形的左上角y坐标值。 | 428| width | number | 指定矩形的宽度。 | 429| height | number | 指定矩形的高度。 | 430 431**示例：** 432 433 ```html 434<!-- xxx.hml --> 435<div> 436 <canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas> 437</div> 438 ``` 439 440 ```js 441// xxx.js 442export default { 443 onShow() { 444 const el = this.$refs.canvas; 445 const ctx = el.getContext('2d'); 446 var path = ctx.createPath2D(); 447 path.rect(20, 20, 100, 100); 448 ctx.stroke(path); 449 } 450} 451 ``` 452 453  454
