1# Path2D对象<a name="ZH-CN_TOPIC_0000001163812226"></a> 2 3路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。 4 5> **说明：** 6>从 API Version 6 开始支持。 7 8## addPath\(\)<a name="zh-cn_topic_0000001173164751_section12484748163816"></a> 9 10将另一个路径添加到当前的路径对象中。 11 12- 参数 13 14 <a name="zh-cn_topic_0000001173164751_table1948454813819"></a> 15 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row17484114816383"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p1348494853817"><a name="zh-cn_topic_0000001173164751_p1348494853817"></a><a name="zh-cn_topic_0000001173164751_p1348494853817"></a>参数</p> 16 </th> 17 <th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p1148414873815"><a name="zh-cn_topic_0000001173164751_p1148414873815"></a><a name="zh-cn_topic_0000001173164751_p1148414873815"></a>类型</p> 18 </th> 19 <th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p34841948133816"><a name="zh-cn_topic_0000001173164751_p34841948133816"></a><a name="zh-cn_topic_0000001173164751_p34841948133816"></a>描述</p> 20 </th> 21 </tr> 22 </thead> 23 <tbody><tr id="zh-cn_topic_0000001173164751_row1148424813816"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p64848482383"><a name="zh-cn_topic_0000001173164751_p64848482383"></a><a name="zh-cn_topic_0000001173164751_p64848482383"></a>path</p> 24 </td> 25 <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p9484194817384"><a name="zh-cn_topic_0000001173164751_p9484194817384"></a><a name="zh-cn_topic_0000001173164751_p9484194817384"></a>object</p> 26 </td> 27 <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p9484144883813"><a name="zh-cn_topic_0000001173164751_p9484144883813"></a><a name="zh-cn_topic_0000001173164751_p9484144883813"></a>需要添加到当前路径的路径对象。</p> 28 </td> 29 </tr> 30 </tbody> 31 </table> 32 33- 返回值 34 35 无 36 37- 示例 38 39  40 41 ``` 42 const ctx = canvas.getContext('2d'); 43 var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); 44 var path2 = ctx.createPath2D(); 45 path2.addPath(path1); 46 ctx.stroke(path2); 47 ``` 48 49 50## setTransform\(\)<a name="zh-cn_topic_0000001173164751_section68262045132013"></a> 51 52依据圆弧经过的点和圆弧半径创建圆弧路径。 53 54- 参数 55 56 <a name="zh-cn_topic_0000001173164751_table4826104515201"></a> 57 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row58261345122010"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p1382684562019"><a name="zh-cn_topic_0000001173164751_p1382684562019"></a><a name="zh-cn_topic_0000001173164751_p1382684562019"></a>参数</p> 58 </th> 59 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p382617450202"><a name="zh-cn_topic_0000001173164751_p382617450202"></a><a name="zh-cn_topic_0000001173164751_p382617450202"></a>类型</p> 60 </th> 61 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p48261945172017"><a name="zh-cn_topic_0000001173164751_p48261945172017"></a><a name="zh-cn_topic_0000001173164751_p48261945172017"></a>描述</p> 62 </th> 63 </tr> 64 </thead> 65 <tbody><tr id="zh-cn_topic_0000001173164751_row1182611454206"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p178262456205"><a name="zh-cn_topic_0000001173164751_p178262456205"></a><a name="zh-cn_topic_0000001173164751_p178262456205"></a>scaleX</p> 66 </td> 67 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p182620458203"><a name="zh-cn_topic_0000001173164751_p182620458203"></a><a name="zh-cn_topic_0000001173164751_p182620458203"></a>number</p> 68 </td> 69 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p10751910222"><a name="zh-cn_topic_0000001173164751_p10751910222"></a><a name="zh-cn_topic_0000001173164751_p10751910222"></a>x轴的缩放比例</p> 70 </td> 71 </tr> 72 <tr id="zh-cn_topic_0000001173164751_row168266458201"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p16827445142013"><a name="zh-cn_topic_0000001173164751_p16827445142013"></a><a name="zh-cn_topic_0000001173164751_p16827445142013"></a>skewX</p> 73 </td> 74 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p68274454204"><a name="zh-cn_topic_0000001173164751_p68274454204"></a><a name="zh-cn_topic_0000001173164751_p68274454204"></a>number</p> 75 </td> 76 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p71155207223"><a name="zh-cn_topic_0000001173164751_p71155207223"></a><a name="zh-cn_topic_0000001173164751_p71155207223"></a>x轴的倾斜角度</p> 77 </td> 78 </tr> 79 <tr id="zh-cn_topic_0000001173164751_row38271945122016"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p7827134572011"><a name="zh-cn_topic_0000001173164751_p7827134572011"></a><a name="zh-cn_topic_0000001173164751_p7827134572011"></a>skewY</p> 80 </td> 81 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p168275453206"><a name="zh-cn_topic_0000001173164751_p168275453206"></a><a name="zh-cn_topic_0000001173164751_p168275453206"></a>number</p> 82 </td> 83 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p562016295229"><a name="zh-cn_topic_0000001173164751_p562016295229"></a><a name="zh-cn_topic_0000001173164751_p562016295229"></a>y轴的倾斜角度</p> 84 </td> 85 </tr> 86 <tr id="zh-cn_topic_0000001173164751_row13827114514206"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p11827745122012"><a name="zh-cn_topic_0000001173164751_p11827745122012"></a><a name="zh-cn_topic_0000001173164751_p11827745122012"></a>scaleY</p> 87 </td> 88 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p168272459209"><a name="zh-cn_topic_0000001173164751_p168272459209"></a><a name="zh-cn_topic_0000001173164751_p168272459209"></a>number</p> 89 </td> 90 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p19205153616222"><a name="zh-cn_topic_0000001173164751_p19205153616222"></a><a name="zh-cn_topic_0000001173164751_p19205153616222"></a>y轴的缩放比例</p> 91 </td> 92 </tr> 93 <tr id="zh-cn_topic_0000001173164751_row482704512010"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p2082713455206"><a name="zh-cn_topic_0000001173164751_p2082713455206"></a><a name="zh-cn_topic_0000001173164751_p2082713455206"></a>translateX</p> 94 </td> 95 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p5827104512206"><a name="zh-cn_topic_0000001173164751_p5827104512206"></a><a name="zh-cn_topic_0000001173164751_p5827104512206"></a>number</p> 96 </td> 97 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p10511942152217"><a name="zh-cn_topic_0000001173164751_p10511942152217"></a><a name="zh-cn_topic_0000001173164751_p10511942152217"></a>x轴的平移距离</p> 98 </td> 99 </tr> 100 <tr id="zh-cn_topic_0000001173164751_row1274814215213"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p574820262114"><a name="zh-cn_topic_0000001173164751_p574820262114"></a><a name="zh-cn_topic_0000001173164751_p574820262114"></a>translateY</p> 101 </td> 102 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1174820232117"><a name="zh-cn_topic_0000001173164751_p1174820232117"></a><a name="zh-cn_topic_0000001173164751_p1174820232117"></a>number</p> 103 </td> 104 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p1645314484227"><a name="zh-cn_topic_0000001173164751_p1645314484227"></a><a name="zh-cn_topic_0000001173164751_p1645314484227"></a>y轴的平移距离</p> 105 </td> 106 </tr> 107 </tbody> 108 </table> 109 110- 返回值 111 112 无 113 114- 示例 115 116  117 118 ``` 119 const ctx = canvas.getContext('2d'); 120 var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); 121 path.setTransform(0.8, 0, 0, 0.4, 0, 0); 122 ctx.stroke(path); 123 ``` 124 125 126## closePath\(\)<a name="zh-cn_topic_0000001173164751_section653891424217"></a> 127 128将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 129 130- 参数 131 132 无 133 134- 返回值 135 136 无 137 138- 示例 139 140  141 142 ``` 143 const ctx = canvas.getContext('2d'); 144 var path = ctx.createPath2D(); 145 path.moveTo(200, 100); 146 path.lineTo(300, 100); 147 path.lineTo(200, 200); 148 path.closePath(); 149 ctx.stroke(path); 150 ``` 151 152 153## moveTo\(\)<a name="zh-cn_topic_0000001173164751_section384917162456"></a> 154 155将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 156 157- 参数 158 159 <a name="zh-cn_topic_0000001173164751_table78491916124512"></a> 160 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row14850181613456"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p11850191612454"><a name="zh-cn_topic_0000001173164751_p11850191612454"></a><a name="zh-cn_topic_0000001173164751_p11850191612454"></a>参数</p> 161 </th> 162 <th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p9850416144514"><a name="zh-cn_topic_0000001173164751_p9850416144514"></a><a name="zh-cn_topic_0000001173164751_p9850416144514"></a>类型</p> 163 </th> 164 <th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p1850816154519"><a name="zh-cn_topic_0000001173164751_p1850816154519"></a><a name="zh-cn_topic_0000001173164751_p1850816154519"></a>描述</p> 165 </th> 166 </tr> 167 </thead> 168 <tbody><tr id="zh-cn_topic_0000001173164751_row6850181612455"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p17850161612455"><a name="zh-cn_topic_0000001173164751_p17850161612455"></a><a name="zh-cn_topic_0000001173164751_p17850161612455"></a>x</p> 169 </td> 170 <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p118501716164516"><a name="zh-cn_topic_0000001173164751_p118501716164516"></a><a name="zh-cn_topic_0000001173164751_p118501716164516"></a>number</p> 171 </td> 172 <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p3850181634517"><a name="zh-cn_topic_0000001173164751_p3850181634517"></a><a name="zh-cn_topic_0000001173164751_p3850181634517"></a>目标点X轴坐标</p> 173 </td> 174 </tr> 175 <tr id="zh-cn_topic_0000001173164751_row12850181618452"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1185081616453"><a name="zh-cn_topic_0000001173164751_p1185081616453"></a><a name="zh-cn_topic_0000001173164751_p1185081616453"></a>y</p> 176 </td> 177 <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p98506164455"><a name="zh-cn_topic_0000001173164751_p98506164455"></a><a name="zh-cn_topic_0000001173164751_p98506164455"></a>number</p> 178 </td> 179 <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p138501116104518"><a name="zh-cn_topic_0000001173164751_p138501116104518"></a><a name="zh-cn_topic_0000001173164751_p138501116104518"></a>目标点Y轴坐标</p> 180 </td> 181 </tr> 182 </tbody> 183 </table> 184 185- 返回值 186 187 无 188 189- 示例 190 191  192 193 ``` 194 const ctx = canvas.getContext('2d'); 195 var path = ctx.createPath2D(); 196 path.moveTo(50, 100); 197 path.lineTo(250, 100); 198 path.lineTo(150, 200); 199 path.closePath(); 200 ctx.stroke(path); 201 ``` 202 203 204## lineTo\(\)<a name="zh-cn_topic_0000001173164751_section1374011322484"></a> 205 206从当前点绘制一条直线到目标点。 207 208- 参数 209 210 <a name="zh-cn_topic_0000001173164751_table174093224819"></a> 211 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row187401432134818"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p374173224817"><a name="zh-cn_topic_0000001173164751_p374173224817"></a><a name="zh-cn_topic_0000001173164751_p374173224817"></a>参数</p> 212 </th> 213 <th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p2741183219482"><a name="zh-cn_topic_0000001173164751_p2741183219482"></a><a name="zh-cn_topic_0000001173164751_p2741183219482"></a>类型</p> 214 </th> 215 <th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p1774112327488"><a name="zh-cn_topic_0000001173164751_p1774112327488"></a><a name="zh-cn_topic_0000001173164751_p1774112327488"></a>描述</p> 216 </th> 217 </tr> 218 </thead> 219 <tbody><tr id="zh-cn_topic_0000001173164751_row1741143284810"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p19741103254812"><a name="zh-cn_topic_0000001173164751_p19741103254812"></a><a name="zh-cn_topic_0000001173164751_p19741103254812"></a>x</p> 220 </td> 221 <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p57411832154812"><a name="zh-cn_topic_0000001173164751_p57411832154812"></a><a name="zh-cn_topic_0000001173164751_p57411832154812"></a>number</p> 222 </td> 223 <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p1474119322489"><a name="zh-cn_topic_0000001173164751_p1474119322489"></a><a name="zh-cn_topic_0000001173164751_p1474119322489"></a>目标点X轴坐标</p> 224 </td> 225 </tr> 226 <tr id="zh-cn_topic_0000001173164751_row97411532144814"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p14741193212488"><a name="zh-cn_topic_0000001173164751_p14741193212488"></a><a name="zh-cn_topic_0000001173164751_p14741193212488"></a>y</p> 227 </td> 228 <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p127411332174814"><a name="zh-cn_topic_0000001173164751_p127411332174814"></a><a name="zh-cn_topic_0000001173164751_p127411332174814"></a>number</p> 229 </td> 230 <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p137412326481"><a name="zh-cn_topic_0000001173164751_p137412326481"></a><a name="zh-cn_topic_0000001173164751_p137412326481"></a>目标点Y轴坐标</p> 231 </td> 232 </tr> 233 </tbody> 234 </table> 235 236- 返回值 237 238 无 239 240- 示例 241 242  243 244 ``` 245 const ctx = canvas.getContext('2d'); 246 var path = ctx.createPath2D(); 247 path.moveTo(100, 100); 248 path.lineTo(100, 200); 249 path.lineTo(200, 200); 250 path.lineTo(200, 100); 251 path.closePath(); 252 ctx.stroke(path); 253 ``` 254 255 256## bezierCurveTo\(\)<a name="zh-cn_topic_0000001173164751_section122413525494"></a> 257 258创建三次贝赛尔曲线的路径。 259 260- 参数 261 262 <a name="zh-cn_topic_0000001173164751_table5241185218495"></a> 263 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row1224175215491"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p192411529491"><a name="zh-cn_topic_0000001173164751_p192411529491"></a><a name="zh-cn_topic_0000001173164751_p192411529491"></a>参数</p> 264 </th> 265 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p4241052154910"><a name="zh-cn_topic_0000001173164751_p4241052154910"></a><a name="zh-cn_topic_0000001173164751_p4241052154910"></a>类型</p> 266 </th> 267 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p5241052114911"><a name="zh-cn_topic_0000001173164751_p5241052114911"></a><a name="zh-cn_topic_0000001173164751_p5241052114911"></a>描述</p> 268 </th> 269 </tr> 270 </thead> 271 <tbody><tr id="zh-cn_topic_0000001173164751_row624113524497"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p6241135213493"><a name="zh-cn_topic_0000001173164751_p6241135213493"></a><a name="zh-cn_topic_0000001173164751_p6241135213493"></a>cp1x</p> 272 </td> 273 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p22422529499"><a name="zh-cn_topic_0000001173164751_p22422529499"></a><a name="zh-cn_topic_0000001173164751_p22422529499"></a>number</p> 274 </td> 275 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p172421052114919"><a name="zh-cn_topic_0000001173164751_p172421052114919"></a><a name="zh-cn_topic_0000001173164751_p172421052114919"></a>第一个贝塞尔参数的x坐标值。</p> 276 </td> 277 </tr> 278 <tr id="zh-cn_topic_0000001173164751_row924225212492"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p4242115213499"><a name="zh-cn_topic_0000001173164751_p4242115213499"></a><a name="zh-cn_topic_0000001173164751_p4242115213499"></a>cp1y</p> 279 </td> 280 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p7242195234910"><a name="zh-cn_topic_0000001173164751_p7242195234910"></a><a name="zh-cn_topic_0000001173164751_p7242195234910"></a>number</p> 281 </td> 282 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p524211522496"><a name="zh-cn_topic_0000001173164751_p524211522496"></a><a name="zh-cn_topic_0000001173164751_p524211522496"></a>第一个贝塞尔参数的y坐标值。</p> 283 </td> 284 </tr> 285 <tr id="zh-cn_topic_0000001173164751_row1924210522498"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p624214522499"><a name="zh-cn_topic_0000001173164751_p624214522499"></a><a name="zh-cn_topic_0000001173164751_p624214522499"></a>cp2x</p> 286 </td> 287 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p15242175214914"><a name="zh-cn_topic_0000001173164751_p15242175214914"></a><a name="zh-cn_topic_0000001173164751_p15242175214914"></a>number</p> 288 </td> 289 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p524275215490"><a name="zh-cn_topic_0000001173164751_p524275215490"></a><a name="zh-cn_topic_0000001173164751_p524275215490"></a>第二个贝塞尔参数的x坐标值。</p> 290 </td> 291 </tr> 292 <tr id="zh-cn_topic_0000001173164751_row1024285214912"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p3242175211491"><a name="zh-cn_topic_0000001173164751_p3242175211491"></a><a name="zh-cn_topic_0000001173164751_p3242175211491"></a>cp2y</p> 293 </td> 294 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p624205215497"><a name="zh-cn_topic_0000001173164751_p624205215497"></a><a name="zh-cn_topic_0000001173164751_p624205215497"></a>number</p> 295 </td> 296 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p124214527499"><a name="zh-cn_topic_0000001173164751_p124214527499"></a><a name="zh-cn_topic_0000001173164751_p124214527499"></a>第二个贝塞尔参数的y坐标值。</p> 297 </td> 298 </tr> 299 <tr id="zh-cn_topic_0000001173164751_row11242175210494"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p8242185217497"><a name="zh-cn_topic_0000001173164751_p8242185217497"></a><a name="zh-cn_topic_0000001173164751_p8242185217497"></a>x</p> 300 </td> 301 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p11242125219493"><a name="zh-cn_topic_0000001173164751_p11242125219493"></a><a name="zh-cn_topic_0000001173164751_p11242125219493"></a>number</p> 302 </td> 303 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p122428527495"><a name="zh-cn_topic_0000001173164751_p122428527495"></a><a name="zh-cn_topic_0000001173164751_p122428527495"></a>路径结束时的x坐标值。</p> 304 </td> 305 </tr> 306 <tr id="zh-cn_topic_0000001173164751_row02433524498"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p924345217491"><a name="zh-cn_topic_0000001173164751_p924345217491"></a><a name="zh-cn_topic_0000001173164751_p924345217491"></a>y</p> 307 </td> 308 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1243135224912"><a name="zh-cn_topic_0000001173164751_p1243135224912"></a><a name="zh-cn_topic_0000001173164751_p1243135224912"></a>number</p> 309 </td> 310 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p3243135254915"><a name="zh-cn_topic_0000001173164751_p3243135254915"></a><a name="zh-cn_topic_0000001173164751_p3243135254915"></a>路径结束时的y坐标值。</p> 311 </td> 312 </tr> 313 </tbody> 314 </table> 315 316- 返回值 317 318 无 319 320- 示例 321 322  323 324 ``` 325 const ctx = canvas.getContext('2d'); 326 var path = ctx.createPath2D(); 327 path.moveTo(10, 10); 328 path.bezierCurveTo(20, 100, 200, 100, 200, 20); 329 ctx.stroke(path); 330 ``` 331 332 333## quadraticCurveTo\(\)<a name="zh-cn_topic_0000001173164751_section16154556165015"></a> 334 335创建二次贝赛尔曲线的路径。 336 337- 参数 338 339 <a name="zh-cn_topic_0000001173164751_table815416567500"></a> 340 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row915445619508"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p1815412561507"><a name="zh-cn_topic_0000001173164751_p1815412561507"></a><a name="zh-cn_topic_0000001173164751_p1815412561507"></a>参数</p> 341 </th> 342 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p3154195613509"><a name="zh-cn_topic_0000001173164751_p3154195613509"></a><a name="zh-cn_topic_0000001173164751_p3154195613509"></a>类型</p> 343 </th> 344 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p6154456135016"><a name="zh-cn_topic_0000001173164751_p6154456135016"></a><a name="zh-cn_topic_0000001173164751_p6154456135016"></a>描述</p> 345 </th> 346 </tr> 347 </thead> 348 <tbody><tr id="zh-cn_topic_0000001173164751_row51543567505"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p111544569503"><a name="zh-cn_topic_0000001173164751_p111544569503"></a><a name="zh-cn_topic_0000001173164751_p111544569503"></a>cpx</p> 349 </td> 350 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1315419563508"><a name="zh-cn_topic_0000001173164751_p1315419563508"></a><a name="zh-cn_topic_0000001173164751_p1315419563508"></a>number</p> 351 </td> 352 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p10154105675010"><a name="zh-cn_topic_0000001173164751_p10154105675010"></a><a name="zh-cn_topic_0000001173164751_p10154105675010"></a>贝塞尔参数的x坐标值。</p> 353 </td> 354 </tr> 355 <tr id="zh-cn_topic_0000001173164751_row4154175618504"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1615410566508"><a name="zh-cn_topic_0000001173164751_p1615410566508"></a><a name="zh-cn_topic_0000001173164751_p1615410566508"></a>cpy</p> 356 </td> 357 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p31540568507"><a name="zh-cn_topic_0000001173164751_p31540568507"></a><a name="zh-cn_topic_0000001173164751_p31540568507"></a>number</p> 358 </td> 359 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p8154165685013"><a name="zh-cn_topic_0000001173164751_p8154165685013"></a><a name="zh-cn_topic_0000001173164751_p8154165685013"></a>贝塞尔参数的y坐标值。</p> 360 </td> 361 </tr> 362 <tr id="zh-cn_topic_0000001173164751_row11548564504"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p41551856175018"><a name="zh-cn_topic_0000001173164751_p41551856175018"></a><a name="zh-cn_topic_0000001173164751_p41551856175018"></a>x</p> 363 </td> 364 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1515575685013"><a name="zh-cn_topic_0000001173164751_p1515575685013"></a><a name="zh-cn_topic_0000001173164751_p1515575685013"></a>number</p> 365 </td> 366 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p9155115610507"><a name="zh-cn_topic_0000001173164751_p9155115610507"></a><a name="zh-cn_topic_0000001173164751_p9155115610507"></a>路径结束时的x坐标值。</p> 367 </td> 368 </tr> 369 <tr id="zh-cn_topic_0000001173164751_row1115555665015"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p18155105685012"><a name="zh-cn_topic_0000001173164751_p18155105685012"></a><a name="zh-cn_topic_0000001173164751_p18155105685012"></a>y</p> 370 </td> 371 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p20155856135019"><a name="zh-cn_topic_0000001173164751_p20155856135019"></a><a name="zh-cn_topic_0000001173164751_p20155856135019"></a>number</p> 372 </td> 373 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p5155156125013"><a name="zh-cn_topic_0000001173164751_p5155156125013"></a><a name="zh-cn_topic_0000001173164751_p5155156125013"></a>路径结束时的y坐标值。</p> 374 </td> 375 </tr> 376 </tbody> 377 </table> 378 379- 返回值 380 381 无 382 383- 示例 384 385  386 387 ``` 388 const ctx = canvas.getContext('2d'); 389 var path = ctx.createPath2D(); 390 path.moveTo(10, 10); 391 path.quadraticCurveTo(100, 100, 200, 20); 392 ctx.stroke(path); 393 ``` 394 395 396## arc\(\)<a name="zh-cn_topic_0000001173164751_section950116919527"></a> 397 398绘制弧线路径。 399 400- 参数 401 402 <a name="zh-cn_topic_0000001173164751_table1050139185219"></a> 403 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row250129165211"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p185016935213"><a name="zh-cn_topic_0000001173164751_p185016935213"></a><a name="zh-cn_topic_0000001173164751_p185016935213"></a>参数</p> 404 </th> 405 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p250111935212"><a name="zh-cn_topic_0000001173164751_p250111935212"></a><a name="zh-cn_topic_0000001173164751_p250111935212"></a>类型</p> 406 </th> 407 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p7501997528"><a name="zh-cn_topic_0000001173164751_p7501997528"></a><a name="zh-cn_topic_0000001173164751_p7501997528"></a>描述</p> 408 </th> 409 </tr> 410 </thead> 411 <tbody><tr id="zh-cn_topic_0000001173164751_row850189195216"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p175011099524"><a name="zh-cn_topic_0000001173164751_p175011099524"></a><a name="zh-cn_topic_0000001173164751_p175011099524"></a>x</p> 412 </td> 413 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p14501390521"><a name="zh-cn_topic_0000001173164751_p14501390521"></a><a name="zh-cn_topic_0000001173164751_p14501390521"></a>number</p> 414 </td> 415 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p85027935216"><a name="zh-cn_topic_0000001173164751_p85027935216"></a><a name="zh-cn_topic_0000001173164751_p85027935216"></a>弧线圆心的x坐标值。</p> 416 </td> 417 </tr> 418 <tr id="zh-cn_topic_0000001173164751_row350216985214"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p55026925210"><a name="zh-cn_topic_0000001173164751_p55026925210"></a><a name="zh-cn_topic_0000001173164751_p55026925210"></a>y</p> 419 </td> 420 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p75021291525"><a name="zh-cn_topic_0000001173164751_p75021291525"></a><a name="zh-cn_topic_0000001173164751_p75021291525"></a>number</p> 421 </td> 422 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p18502193521"><a name="zh-cn_topic_0000001173164751_p18502193521"></a><a name="zh-cn_topic_0000001173164751_p18502193521"></a>弧线圆心的y坐标值。</p> 423 </td> 424 </tr> 425 <tr id="zh-cn_topic_0000001173164751_row2502169185215"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p150211925210"><a name="zh-cn_topic_0000001173164751_p150211925210"></a><a name="zh-cn_topic_0000001173164751_p150211925210"></a>radius</p> 426 </td> 427 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p550211913528"><a name="zh-cn_topic_0000001173164751_p550211913528"></a><a name="zh-cn_topic_0000001173164751_p550211913528"></a>number</p> 428 </td> 429 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p13502169135212"><a name="zh-cn_topic_0000001173164751_p13502169135212"></a><a name="zh-cn_topic_0000001173164751_p13502169135212"></a>弧线的圆半径。</p> 430 </td> 431 </tr> 432 <tr id="zh-cn_topic_0000001173164751_row550212975211"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1350212985217"><a name="zh-cn_topic_0000001173164751_p1350212985217"></a><a name="zh-cn_topic_0000001173164751_p1350212985217"></a>startAngle</p> 433 </td> 434 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p85029985211"><a name="zh-cn_topic_0000001173164751_p85029985211"></a><a name="zh-cn_topic_0000001173164751_p85029985211"></a>number</p> 435 </td> 436 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p165021920526"><a name="zh-cn_topic_0000001173164751_p165021920526"></a><a name="zh-cn_topic_0000001173164751_p165021920526"></a>弧线的起始弧度。</p> 437 </td> 438 </tr> 439 <tr id="zh-cn_topic_0000001173164751_row25022912524"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p105021912522"><a name="zh-cn_topic_0000001173164751_p105021912522"></a><a name="zh-cn_topic_0000001173164751_p105021912522"></a>endAngle</p> 440 </td> 441 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p150219925218"><a name="zh-cn_topic_0000001173164751_p150219925218"></a><a name="zh-cn_topic_0000001173164751_p150219925218"></a>number</p> 442 </td> 443 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p550213945213"><a name="zh-cn_topic_0000001173164751_p550213945213"></a><a name="zh-cn_topic_0000001173164751_p550213945213"></a>弧线的终止弧度。</p> 444 </td> 445 </tr> 446 <tr id="zh-cn_topic_0000001173164751_row250218913526"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p850216913520"><a name="zh-cn_topic_0000001173164751_p850216913520"></a><a name="zh-cn_topic_0000001173164751_p850216913520"></a>anticlockwise</p> 447 </td> 448 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1850219914524"><a name="zh-cn_topic_0000001173164751_p1850219914524"></a><a name="zh-cn_topic_0000001173164751_p1850219914524"></a>boolean</p> 449 </td> 450 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p105031691522"><a name="zh-cn_topic_0000001173164751_p105031691522"></a><a name="zh-cn_topic_0000001173164751_p105031691522"></a>是否逆时针绘制圆弧。</p> 451 </td> 452 </tr> 453 </tbody> 454 </table> 455 456- 返回值 457 458 无 459 460- 示例 461 462  463 464 ``` 465 const ctx = canvas.getContext('2d'); 466 var path = ctx.createPath2D(); 467 path.arc(100, 75, 50, 0, 6.28); 468 ctx.stroke(path); 469 ``` 470 471 472## arcTo\(\)<a name="zh-cn_topic_0000001173164751_section98421358175219"></a> 473 474依据圆弧经过的点和圆弧半径创建圆弧路径。 475 476- 参数 477 478 <a name="zh-cn_topic_0000001173164751_table584265819528"></a> 479 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row198421584521"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p12842115815217"><a name="zh-cn_topic_0000001173164751_p12842115815217"></a><a name="zh-cn_topic_0000001173164751_p12842115815217"></a>参数</p> 480 </th> 481 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p38431558175217"><a name="zh-cn_topic_0000001173164751_p38431558175217"></a><a name="zh-cn_topic_0000001173164751_p38431558175217"></a>类型</p> 482 </th> 483 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p8843195812520"><a name="zh-cn_topic_0000001173164751_p8843195812520"></a><a name="zh-cn_topic_0000001173164751_p8843195812520"></a>描述</p> 484 </th> 485 </tr> 486 </thead> 487 <tbody><tr id="zh-cn_topic_0000001173164751_row148431358115213"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p384345875215"><a name="zh-cn_topic_0000001173164751_p384345875215"></a><a name="zh-cn_topic_0000001173164751_p384345875215"></a>x1</p> 488 </td> 489 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p984325805212"><a name="zh-cn_topic_0000001173164751_p984325805212"></a><a name="zh-cn_topic_0000001173164751_p984325805212"></a>number</p> 490 </td> 491 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p178438582527"><a name="zh-cn_topic_0000001173164751_p178438582527"></a><a name="zh-cn_topic_0000001173164751_p178438582527"></a>圆弧经过的第一个点的x坐标值。</p> 492 </td> 493 </tr> 494 <tr id="zh-cn_topic_0000001173164751_row1984385813525"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p16843958185217"><a name="zh-cn_topic_0000001173164751_p16843958185217"></a><a name="zh-cn_topic_0000001173164751_p16843958185217"></a>y1</p> 495 </td> 496 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p168431058165216"><a name="zh-cn_topic_0000001173164751_p168431058165216"></a><a name="zh-cn_topic_0000001173164751_p168431058165216"></a>number</p> 497 </td> 498 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p12843205813522"><a name="zh-cn_topic_0000001173164751_p12843205813522"></a><a name="zh-cn_topic_0000001173164751_p12843205813522"></a>圆弧经过的第一个点的y坐标值。</p> 499 </td> 500 </tr> 501 <tr id="zh-cn_topic_0000001173164751_row88431558115211"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p88431058105211"><a name="zh-cn_topic_0000001173164751_p88431058105211"></a><a name="zh-cn_topic_0000001173164751_p88431058105211"></a>x2</p> 502 </td> 503 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1984315875217"><a name="zh-cn_topic_0000001173164751_p1984315875217"></a><a name="zh-cn_topic_0000001173164751_p1984315875217"></a>number</p> 504 </td> 505 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p158431558185211"><a name="zh-cn_topic_0000001173164751_p158431558185211"></a><a name="zh-cn_topic_0000001173164751_p158431558185211"></a>圆弧经过的第二个点的x坐标值。</p> 506 </td> 507 </tr> 508 <tr id="zh-cn_topic_0000001173164751_row198431858125217"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1484420584525"><a name="zh-cn_topic_0000001173164751_p1484420584525"></a><a name="zh-cn_topic_0000001173164751_p1484420584525"></a>y2</p> 509 </td> 510 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p084495885213"><a name="zh-cn_topic_0000001173164751_p084495885213"></a><a name="zh-cn_topic_0000001173164751_p084495885213"></a>number</p> 511 </td> 512 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p1684418583522"><a name="zh-cn_topic_0000001173164751_p1684418583522"></a><a name="zh-cn_topic_0000001173164751_p1684418583522"></a>圆弧经过的第二个点的y坐标值。</p> 513 </td> 514 </tr> 515 <tr id="zh-cn_topic_0000001173164751_row11844358155211"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p8844155865219"><a name="zh-cn_topic_0000001173164751_p8844155865219"></a><a name="zh-cn_topic_0000001173164751_p8844155865219"></a>radius</p> 516 </td> 517 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1984410581525"><a name="zh-cn_topic_0000001173164751_p1984410581525"></a><a name="zh-cn_topic_0000001173164751_p1984410581525"></a>number</p> 518 </td> 519 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p17844155815220"><a name="zh-cn_topic_0000001173164751_p17844155815220"></a><a name="zh-cn_topic_0000001173164751_p17844155815220"></a>圆弧的圆半径值。</p> 520 </td> 521 </tr> 522 </tbody> 523 </table> 524 525- 返回值 526 527 无 528 529- 示例 530 531  532 533 ``` 534 const ctx = canvas.getContext('2d'); 535 var path = ctx.createPath2D(); 536 path.arcTo(150, 20, 150, 70, 50); 537 ctx.stroke(path); 538 ``` 539 540 541## ellipse\(\)<a name="zh-cn_topic_0000001173164751_section8146160205420"></a> 542 543在规定的矩形区域绘制一个椭圆。 544 545- 参数 546 547 <a name="zh-cn_topic_0000001173164751_table51461805541"></a> 548 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row181461109541"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p014716035415"><a name="zh-cn_topic_0000001173164751_p014716035415"></a><a name="zh-cn_topic_0000001173164751_p014716035415"></a>参数</p> 549 </th> 550 <th class="cellrowborder" valign="top" width="31.34343434343434%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p171472055413"><a name="zh-cn_topic_0000001173164751_p171472055413"></a><a name="zh-cn_topic_0000001173164751_p171472055413"></a>类型</p> 551 </th> 552 <th class="cellrowborder" valign="top" width="35.323232323232325%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p1814718035418"><a name="zh-cn_topic_0000001173164751_p1814718035418"></a><a name="zh-cn_topic_0000001173164751_p1814718035418"></a>描述</p> 553 </th> 554 </tr> 555 </thead> 556 <tbody><tr id="zh-cn_topic_0000001173164751_row1114714015418"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p81478015543"><a name="zh-cn_topic_0000001173164751_p81478015543"></a><a name="zh-cn_topic_0000001173164751_p81478015543"></a>x</p> 557 </td> 558 <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p71470013548"><a name="zh-cn_topic_0000001173164751_p71470013548"></a><a name="zh-cn_topic_0000001173164751_p71470013548"></a>number</p> 559 </td> 560 <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p714720125410"><a name="zh-cn_topic_0000001173164751_p714720125410"></a><a name="zh-cn_topic_0000001173164751_p714720125410"></a>椭圆圆心的x轴坐标。</p> 561 </td> 562 </tr> 563 <tr id="zh-cn_topic_0000001173164751_row1114710018548"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1214718010544"><a name="zh-cn_topic_0000001173164751_p1214718010544"></a><a name="zh-cn_topic_0000001173164751_p1214718010544"></a>y</p> 564 </td> 565 <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p314760175411"><a name="zh-cn_topic_0000001173164751_p314760175411"></a><a name="zh-cn_topic_0000001173164751_p314760175411"></a>number</p> 566 </td> 567 <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p014730105419"><a name="zh-cn_topic_0000001173164751_p014730105419"></a><a name="zh-cn_topic_0000001173164751_p014730105419"></a>椭圆圆心的y轴坐标。</p> 568 </td> 569 </tr> 570 <tr id="zh-cn_topic_0000001173164751_row2147709540"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p201478045416"><a name="zh-cn_topic_0000001173164751_p201478045416"></a><a name="zh-cn_topic_0000001173164751_p201478045416"></a>radiusX</p> 571 </td> 572 <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p14147205540"><a name="zh-cn_topic_0000001173164751_p14147205540"></a><a name="zh-cn_topic_0000001173164751_p14147205540"></a>number</p> 573 </td> 574 <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p151475013547"><a name="zh-cn_topic_0000001173164751_p151475013547"></a><a name="zh-cn_topic_0000001173164751_p151475013547"></a>椭圆x轴的半径长度。</p> 575 </td> 576 </tr> 577 <tr id="zh-cn_topic_0000001173164751_row61474012544"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p51477018543"><a name="zh-cn_topic_0000001173164751_p51477018543"></a><a name="zh-cn_topic_0000001173164751_p51477018543"></a>radiusY</p> 578 </td> 579 <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p14148150205416"><a name="zh-cn_topic_0000001173164751_p14148150205416"></a><a name="zh-cn_topic_0000001173164751_p14148150205416"></a>number</p> 580 </td> 581 <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p181481705544"><a name="zh-cn_topic_0000001173164751_p181481705544"></a><a name="zh-cn_topic_0000001173164751_p181481705544"></a>椭圆y轴的半径长度。</p> 582 </td> 583 </tr> 584 <tr id="zh-cn_topic_0000001173164751_row201484005417"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p161483075416"><a name="zh-cn_topic_0000001173164751_p161483075416"></a><a name="zh-cn_topic_0000001173164751_p161483075416"></a>rotation</p> 585 </td> 586 <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1148502548"><a name="zh-cn_topic_0000001173164751_p1148502548"></a><a name="zh-cn_topic_0000001173164751_p1148502548"></a>number</p> 587 </td> 588 <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p514820005414"><a name="zh-cn_topic_0000001173164751_p514820005414"></a><a name="zh-cn_topic_0000001173164751_p514820005414"></a>椭圆的旋转角度，单位为弧度。</p> 589 </td> 590 </tr> 591 <tr id="zh-cn_topic_0000001173164751_row181481704549"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1814850165416"><a name="zh-cn_topic_0000001173164751_p1814850165416"></a><a name="zh-cn_topic_0000001173164751_p1814850165416"></a>startAngle</p> 592 </td> 593 <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p1914815025414"><a name="zh-cn_topic_0000001173164751_p1914815025414"></a><a name="zh-cn_topic_0000001173164751_p1914815025414"></a>number</p> 594 </td> 595 <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p51481906547"><a name="zh-cn_topic_0000001173164751_p51481906547"></a><a name="zh-cn_topic_0000001173164751_p51481906547"></a>椭圆绘制的起始点角度，以弧度表示。</p> 596 </td> 597 </tr> 598 <tr id="zh-cn_topic_0000001173164751_row1148150125412"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p131483019542"><a name="zh-cn_topic_0000001173164751_p131483019542"></a><a name="zh-cn_topic_0000001173164751_p131483019542"></a>endAngle</p> 599 </td> 600 <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p14148190155418"><a name="zh-cn_topic_0000001173164751_p14148190155418"></a><a name="zh-cn_topic_0000001173164751_p14148190155418"></a>number</p> 601 </td> 602 <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p1114812095411"><a name="zh-cn_topic_0000001173164751_p1114812095411"></a><a name="zh-cn_topic_0000001173164751_p1114812095411"></a>椭圆绘制的结束点角度，以弧度表示。</p> 603 </td> 604 </tr> 605 <tr id="zh-cn_topic_0000001173164751_row4148206542"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1114817035417"><a name="zh-cn_topic_0000001173164751_p1114817035417"></a><a name="zh-cn_topic_0000001173164751_p1114817035417"></a>anticlockwise</p> 606 </td> 607 <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p3148130105411"><a name="zh-cn_topic_0000001173164751_p3148130105411"></a><a name="zh-cn_topic_0000001173164751_p3148130105411"></a>number</p> 608 </td> 609 <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p914910015410"><a name="zh-cn_topic_0000001173164751_p914910015410"></a><a name="zh-cn_topic_0000001173164751_p914910015410"></a>是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)</p> 610 </td> 611 </tr> 612 </tbody> 613 </table> 614 615- 返回值 616 617 无 618 619- 示例 620 621  622 623 ``` 624 const ctx = canvas.getContext('2d'); 625 var path = ctx.createPath2D(); 626 path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); 627 ctx.stroke(path); 628 ``` 629 630 631## rect\(\)<a name="zh-cn_topic_0000001173164751_section18565225124518"></a> 632 633创建矩形路径。 634 635- 参数 636 637 <a name="zh-cn_topic_0000001173164751_table92131548185610"></a> 638 <table><thead align="left"><tr id="zh-cn_topic_0000001173164751_row9238348185613"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164751_p723854810561"><a name="zh-cn_topic_0000001173164751_p723854810561"></a><a name="zh-cn_topic_0000001173164751_p723854810561"></a>参数</p> 639 </th> 640 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164751_p2238144885615"><a name="zh-cn_topic_0000001173164751_p2238144885615"></a><a name="zh-cn_topic_0000001173164751_p2238144885615"></a>类型</p> 641 </th> 642 <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164751_p223814486561"><a name="zh-cn_topic_0000001173164751_p223814486561"></a><a name="zh-cn_topic_0000001173164751_p223814486561"></a>描述</p> 643 </th> 644 </tr> 645 </thead> 646 <tbody><tr id="zh-cn_topic_0000001173164751_row5238104813569"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1423864816566"><a name="zh-cn_topic_0000001173164751_p1423864816566"></a><a name="zh-cn_topic_0000001173164751_p1423864816566"></a>x</p> 647 </td> 648 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p3238194814560"><a name="zh-cn_topic_0000001173164751_p3238194814560"></a><a name="zh-cn_topic_0000001173164751_p3238194814560"></a>number</p> 649 </td> 650 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p9238204818566"><a name="zh-cn_topic_0000001173164751_p9238204818566"></a><a name="zh-cn_topic_0000001173164751_p9238204818566"></a>指定矩形的左上角x坐标值。</p> 651 </td> 652 </tr> 653 <tr id="zh-cn_topic_0000001173164751_row1423884816562"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p132383488563"><a name="zh-cn_topic_0000001173164751_p132383488563"></a><a name="zh-cn_topic_0000001173164751_p132383488563"></a>y</p> 654 </td> 655 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p02395487560"><a name="zh-cn_topic_0000001173164751_p02395487560"></a><a name="zh-cn_topic_0000001173164751_p02395487560"></a>number</p> 656 </td> 657 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p523934819568"><a name="zh-cn_topic_0000001173164751_p523934819568"></a><a name="zh-cn_topic_0000001173164751_p523934819568"></a>指定矩形的左上角y坐标值。</p> 658 </td> 659 </tr> 660 <tr id="zh-cn_topic_0000001173164751_row723954815563"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p182391481565"><a name="zh-cn_topic_0000001173164751_p182391481565"></a><a name="zh-cn_topic_0000001173164751_p182391481565"></a>width</p> 661 </td> 662 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p142391648145610"><a name="zh-cn_topic_0000001173164751_p142391648145610"></a><a name="zh-cn_topic_0000001173164751_p142391648145610"></a>number</p> 663 </td> 664 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p523919486569"><a name="zh-cn_topic_0000001173164751_p523919486569"></a><a name="zh-cn_topic_0000001173164751_p523919486569"></a>指定矩形的宽度。</p> 665 </td> 666 </tr> 667 <tr id="zh-cn_topic_0000001173164751_row1723924885618"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164751_p1923934820561"><a name="zh-cn_topic_0000001173164751_p1923934820561"></a><a name="zh-cn_topic_0000001173164751_p1923934820561"></a>height</p> 668 </td> 669 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164751_p13239448135615"><a name="zh-cn_topic_0000001173164751_p13239448135615"></a><a name="zh-cn_topic_0000001173164751_p13239448135615"></a>number</p> 670 </td> 671 <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164751_p523924819568"><a name="zh-cn_topic_0000001173164751_p523924819568"></a><a name="zh-cn_topic_0000001173164751_p523924819568"></a>指定矩形的高度。</p> 672 </td> 673 </tr> 674 </tbody> 675 </table> 676 677- 返回值 678 679 无 680 681- 示例 682 683  684 685 ``` 686 const ctx = canvas.getContext('2d'); 687 var path = ctx.createPath2D(); 688 path.rect(20, 20, 100, 100); 689 ctx.stroke(path); 690 ``` 691 692 693
