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