• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# CanvasRenderingContext2D对象<a name="ZH-CN_TOPIC_0000001164130772"></a>
2
3使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。
4
5-   示例
6
7    ```
8    <!-- xxx.hml -->
9    <div>
10      <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
11      <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
12      <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="antialias" />
13    </div>
14    ```
15
16    ```
17    // xxx.js
18    export default {
19      handleClick() {
20        const el = this.$refs.canvas1;
21        const ctx = el.getContext('2d');
22        ctx.beginPath();
23        ctx.arc(100, 75, 50, 0, 6.28);
24        ctx.stroke();
25      },
26      antialias() {
27        const el = this.$refs.canvas1;
28        const ctx = el.getContext('2d', { antialias: true });
29        ctx.beginPath();
30        ctx.arc(100, 75, 50, 0, 6.28);
31        ctx.stroke();
32      }
33    }
34    ```
35
36
37-   示意图（关闭抗锯齿）
38
39    ![](figures/zh-cn_image_0000001212161505.png)
40
41-   示意图（开启抗锯齿）
42
43    ![](figures/zh-cn_image_0000001212081543.png)
44
45
46## fillRect\(\)<a name="zh-cn_topic_0000001173164707_section16678142165920"></a>
47
48填充一个矩形。
49
50-   参数
51
52    <a name="zh-cn_topic_0000001173164707_table116784429596"></a>
53    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row167864213591"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p8678134225914"><a name="zh-cn_topic_0000001173164707_p8678134225914"></a><a name="zh-cn_topic_0000001173164707_p8678134225914"></a>参数</p>
54    </th>
55    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p567911425597"><a name="zh-cn_topic_0000001173164707_p567911425597"></a><a name="zh-cn_topic_0000001173164707_p567911425597"></a>类型</p>
56    </th>
57    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p116798423594"><a name="zh-cn_topic_0000001173164707_p116798423594"></a><a name="zh-cn_topic_0000001173164707_p116798423594"></a>描述</p>
58    </th>
59    </tr>
60    </thead>
61    <tbody><tr id="zh-cn_topic_0000001173164707_row46791042125917"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1467911422593"><a name="zh-cn_topic_0000001173164707_p1467911422593"></a><a name="zh-cn_topic_0000001173164707_p1467911422593"></a>x</p>
62    </td>
63    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1967994235916"><a name="zh-cn_topic_0000001173164707_p1967994235916"></a><a name="zh-cn_topic_0000001173164707_p1967994235916"></a>number</p>
64    </td>
65    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1367984295913"><a name="zh-cn_topic_0000001173164707_p1367984295913"></a><a name="zh-cn_topic_0000001173164707_p1367984295913"></a>指定矩形左上角点的x坐标。</p>
66    </td>
67    </tr>
68    <tr id="zh-cn_topic_0000001173164707_row1667911426594"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p7679154225917"><a name="zh-cn_topic_0000001173164707_p7679154225917"></a><a name="zh-cn_topic_0000001173164707_p7679154225917"></a>y</p>
69    </td>
70    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p867984219592"><a name="zh-cn_topic_0000001173164707_p867984219592"></a><a name="zh-cn_topic_0000001173164707_p867984219592"></a>number</p>
71    </td>
72    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p567964295917"><a name="zh-cn_topic_0000001173164707_p567964295917"></a><a name="zh-cn_topic_0000001173164707_p567964295917"></a>指定矩形左上角点的y坐标。</p>
73    </td>
74    </tr>
75    <tr id="zh-cn_topic_0000001173164707_row13679114214590"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p126791642105910"><a name="zh-cn_topic_0000001173164707_p126791642105910"></a><a name="zh-cn_topic_0000001173164707_p126791642105910"></a>width</p>
76    </td>
77    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p26792422594"><a name="zh-cn_topic_0000001173164707_p26792422594"></a><a name="zh-cn_topic_0000001173164707_p26792422594"></a>number</p>
78    </td>
79    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p899913810401"><a name="zh-cn_topic_0000001173164707_p899913810401"></a><a name="zh-cn_topic_0000001173164707_p899913810401"></a>指定矩形的宽度。</p>
80    </td>
81    </tr>
82    <tr id="zh-cn_topic_0000001173164707_row156796426598"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1567944235917"><a name="zh-cn_topic_0000001173164707_p1567944235917"></a><a name="zh-cn_topic_0000001173164707_p1567944235917"></a>height</p>
83    </td>
84    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p10679642185915"><a name="zh-cn_topic_0000001173164707_p10679642185915"></a><a name="zh-cn_topic_0000001173164707_p10679642185915"></a>number</p>
85    </td>
86    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1668013426599"><a name="zh-cn_topic_0000001173164707_p1668013426599"></a><a name="zh-cn_topic_0000001173164707_p1668013426599"></a>指定矩形的高度。</p>
87    </td>
88    </tr>
89    </tbody>
90    </table>
91
92-   返回值
93
94    无
95
96-   示例
97
98    ```
99    ctx.fillRect(20, 20, 200, 150);
100    ```
101
102    ![](figures/zh-cn_image_0000001166760176.png)
103
104
105## fillStyle<a name="zh-cn_topic_0000001173164707_section159395553313"></a>
106
107指定绘制的填充色。
108
109-   参数
110
111    <a name="zh-cn_topic_0000001173164707_table11871845480"></a>
112    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row8211446487"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p172111344482"><a name="zh-cn_topic_0000001173164707_p172111344482"></a><a name="zh-cn_topic_0000001173164707_p172111344482"></a>参数</p>
113    </th>
114    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p921110413486"><a name="zh-cn_topic_0000001173164707_p921110413486"></a><a name="zh-cn_topic_0000001173164707_p921110413486"></a>类型</p>
115    </th>
116    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p1221111444810"><a name="zh-cn_topic_0000001173164707_p1221111444810"></a><a name="zh-cn_topic_0000001173164707_p1221111444810"></a>描述</p>
117    </th>
118    </tr>
119    </thead>
120    <tbody><tr id="zh-cn_topic_0000001173164707_row92116414485"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p3211242481"><a name="zh-cn_topic_0000001173164707_p3211242481"></a><a name="zh-cn_topic_0000001173164707_p3211242481"></a>color</p>
121    </td>
122    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p3211164124812"><a name="zh-cn_topic_0000001173164707_p3211164124812"></a><a name="zh-cn_topic_0000001173164707_p3211164124812"></a>&lt;color&gt;</p>
123    </td>
124    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p42117420487"><a name="zh-cn_topic_0000001173164707_p42117420487"></a><a name="zh-cn_topic_0000001173164707_p42117420487"></a>设置填充区域的颜色。</p>
125    </td>
126    </tr>
127    <tr id="zh-cn_topic_0000001173164707_row19211345485"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p42124414813"><a name="zh-cn_topic_0000001173164707_p42124414813"></a><a name="zh-cn_topic_0000001173164707_p42124414813"></a>gradient</p>
128    </td>
129    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p52124494812"><a name="zh-cn_topic_0000001173164707_p52124494812"></a><a name="zh-cn_topic_0000001173164707_p52124494812"></a>CanvasGradient</p>
130    </td>
131    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1721217418484"><a name="zh-cn_topic_0000001173164707_p1721217418484"></a><a name="zh-cn_topic_0000001173164707_p1721217418484"></a>渐变对象，使用 createLinearGradient()方法创建。</p>
132    </td>
133    </tr>
134    <tr id="zh-cn_topic_0000001173164707_row621218424815"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p02127464814"><a name="zh-cn_topic_0000001173164707_p02127464814"></a><a name="zh-cn_topic_0000001173164707_p02127464814"></a>pattern</p>
135    </td>
136    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1921284174819"><a name="zh-cn_topic_0000001173164707_p1921284174819"></a><a name="zh-cn_topic_0000001173164707_p1921284174819"></a>CanvasPattern</p>
137    </td>
138    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1821210414486"><a name="zh-cn_topic_0000001173164707_p1821210414486"></a><a name="zh-cn_topic_0000001173164707_p1821210414486"></a>使用 createPattern()方法创建。</p>
139    </td>
140    </tr>
141    </tbody>
142    </table>
143
144-   返回值
145
146    无
147
148-   示例
149
150    ```
151    ctx.fillStyle = '#0000ff';
152    ctx.fillRect(20, 20, 150, 100);
153    ```
154
155    ![](figures/zh-cn_image_0000001166920120.png)
156
157
158## clearRect\(\)<a name="zh-cn_topic_0000001173164707_section205940367194"></a>
159
160删除指定区域内的绘制内容。
161
162-   参数
163
164    <a name="zh-cn_topic_0000001173164707_table17906135163511"></a>
165    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1293515173513"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p9935195111353"><a name="zh-cn_topic_0000001173164707_p9935195111353"></a><a name="zh-cn_topic_0000001173164707_p9935195111353"></a>参数</p>
166    </th>
167    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p993516515354"><a name="zh-cn_topic_0000001173164707_p993516515354"></a><a name="zh-cn_topic_0000001173164707_p993516515354"></a>类型</p>
168    </th>
169    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p1893510517352"><a name="zh-cn_topic_0000001173164707_p1893510517352"></a><a name="zh-cn_topic_0000001173164707_p1893510517352"></a>描述</p>
170    </th>
171    </tr>
172    </thead>
173    <tbody><tr id="zh-cn_topic_0000001173164707_row109351051153516"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p29357518355"><a name="zh-cn_topic_0000001173164707_p29357518355"></a><a name="zh-cn_topic_0000001173164707_p29357518355"></a>x</p>
174    </td>
175    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1093510513353"><a name="zh-cn_topic_0000001173164707_p1093510513353"></a><a name="zh-cn_topic_0000001173164707_p1093510513353"></a>number</p>
176    </td>
177    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1893545115356"><a name="zh-cn_topic_0000001173164707_p1893545115356"></a><a name="zh-cn_topic_0000001173164707_p1893545115356"></a>指定矩形上的左上角x坐标。</p>
178    </td>
179    </tr>
180    <tr id="zh-cn_topic_0000001173164707_row49351651123519"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p14935145119354"><a name="zh-cn_topic_0000001173164707_p14935145119354"></a><a name="zh-cn_topic_0000001173164707_p14935145119354"></a>y</p>
181    </td>
182    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1993595111355"><a name="zh-cn_topic_0000001173164707_p1993595111355"></a><a name="zh-cn_topic_0000001173164707_p1993595111355"></a>number</p>
183    </td>
184    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p14935135103519"><a name="zh-cn_topic_0000001173164707_p14935135103519"></a><a name="zh-cn_topic_0000001173164707_p14935135103519"></a>指定矩形上的左上角y坐标。</p>
185    </td>
186    </tr>
187    <tr id="zh-cn_topic_0000001173164707_row11935551173517"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p129351251173520"><a name="zh-cn_topic_0000001173164707_p129351251173520"></a><a name="zh-cn_topic_0000001173164707_p129351251173520"></a>width</p>
188    </td>
189    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p159351516351"><a name="zh-cn_topic_0000001173164707_p159351516351"></a><a name="zh-cn_topic_0000001173164707_p159351516351"></a>number</p>
190    </td>
191    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p7935195113515"><a name="zh-cn_topic_0000001173164707_p7935195113515"></a><a name="zh-cn_topic_0000001173164707_p7935195113515"></a>指定矩形的宽度。</p>
192    </td>
193    </tr>
194    <tr id="zh-cn_topic_0000001173164707_row13935145118355"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p69361451113519"><a name="zh-cn_topic_0000001173164707_p69361451113519"></a><a name="zh-cn_topic_0000001173164707_p69361451113519"></a>height</p>
195    </td>
196    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p893611511357"><a name="zh-cn_topic_0000001173164707_p893611511357"></a><a name="zh-cn_topic_0000001173164707_p893611511357"></a>number</p>
197    </td>
198    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p11936155183515"><a name="zh-cn_topic_0000001173164707_p11936155183515"></a><a name="zh-cn_topic_0000001173164707_p11936155183515"></a>指定矩形的高度。</p>
199    </td>
200    </tr>
201    </tbody>
202    </table>
203
204-   返回值
205
206    无
207
208-   示例
209
210    ```
211    ctx.fillStyle = 'rgb(0,0,255)';
212    ctx.fillRect(0, 0, 400, 200);
213    ctx.clearRect(20, 20, 150, 100);
214    ```
215
216    ![](figures/zh-cn_image_0000001212320079.png)
217
218
219## strokeRect\(\)<a name="zh-cn_topic_0000001173164707_section18427819195711"></a>
220
221绘制具有边框的矩形，矩形内部不填充。
222
223-   参数
224
225    <a name="zh-cn_topic_0000001173164707_table18471143916378"></a>
226    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1849515396371"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p5495133918379"><a name="zh-cn_topic_0000001173164707_p5495133918379"></a><a name="zh-cn_topic_0000001173164707_p5495133918379"></a>参数</p>
227    </th>
228    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p10495103913717"><a name="zh-cn_topic_0000001173164707_p10495103913717"></a><a name="zh-cn_topic_0000001173164707_p10495103913717"></a>类型</p>
229    </th>
230    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p1949515397379"><a name="zh-cn_topic_0000001173164707_p1949515397379"></a><a name="zh-cn_topic_0000001173164707_p1949515397379"></a>描述</p>
231    </th>
232    </tr>
233    </thead>
234    <tbody><tr id="zh-cn_topic_0000001173164707_row1449512396370"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p15495143917372"><a name="zh-cn_topic_0000001173164707_p15495143917372"></a><a name="zh-cn_topic_0000001173164707_p15495143917372"></a>x</p>
235    </td>
236    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1949514399373"><a name="zh-cn_topic_0000001173164707_p1949514399373"></a><a name="zh-cn_topic_0000001173164707_p1949514399373"></a>number</p>
237    </td>
238    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1149513912372"><a name="zh-cn_topic_0000001173164707_p1149513912372"></a><a name="zh-cn_topic_0000001173164707_p1149513912372"></a>指定矩形的左上角x坐标。</p>
239    </td>
240    </tr>
241    <tr id="zh-cn_topic_0000001173164707_row1049543973713"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p3495193913379"><a name="zh-cn_topic_0000001173164707_p3495193913379"></a><a name="zh-cn_topic_0000001173164707_p3495193913379"></a>y</p>
242    </td>
243    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1349513391377"><a name="zh-cn_topic_0000001173164707_p1349513391377"></a><a name="zh-cn_topic_0000001173164707_p1349513391377"></a>number</p>
244    </td>
245    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p84961139193711"><a name="zh-cn_topic_0000001173164707_p84961139193711"></a><a name="zh-cn_topic_0000001173164707_p84961139193711"></a>指定矩形的左上角y坐标。</p>
246    </td>
247    </tr>
248    <tr id="zh-cn_topic_0000001173164707_row12496139143718"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1049633918378"><a name="zh-cn_topic_0000001173164707_p1049633918378"></a><a name="zh-cn_topic_0000001173164707_p1049633918378"></a>width</p>
249    </td>
250    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p184961039113711"><a name="zh-cn_topic_0000001173164707_p184961039113711"></a><a name="zh-cn_topic_0000001173164707_p184961039113711"></a>number</p>
251    </td>
252    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p18496183918373"><a name="zh-cn_topic_0000001173164707_p18496183918373"></a><a name="zh-cn_topic_0000001173164707_p18496183918373"></a>指定矩形的宽度。</p>
253    </td>
254    </tr>
255    <tr id="zh-cn_topic_0000001173164707_row1842894223717"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p03284623713"><a name="zh-cn_topic_0000001173164707_p03284623713"></a><a name="zh-cn_topic_0000001173164707_p03284623713"></a>height</p>
256    </td>
257    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p83204615372"><a name="zh-cn_topic_0000001173164707_p83204615372"></a><a name="zh-cn_topic_0000001173164707_p83204615372"></a>number</p>
258    </td>
259    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p333154663711"><a name="zh-cn_topic_0000001173164707_p333154663711"></a><a name="zh-cn_topic_0000001173164707_p333154663711"></a>指定矩形的高度。</p>
260    </td>
261    </tr>
262    </tbody>
263    </table>
264
265-   返回值
266
267    无
268
269-   示例
270
271    ```
272    ctx.strokeRect(30, 30, 200, 150);
273    ```
274
275    ![](figures/zh-cn_image_0000001212440079.png)
276
277
278## fillText\(\)<a name="zh-cn_topic_0000001173164707_section114524106587"></a>
279
280绘制填充类文本。
281
282-   参数
283
284    <a name="zh-cn_topic_0000001173164707_table19120835143816"></a>
285    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row9150835103813"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p915043533812"><a name="zh-cn_topic_0000001173164707_p915043533812"></a><a name="zh-cn_topic_0000001173164707_p915043533812"></a>参数</p>
286    </th>
287    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p19150193515381"><a name="zh-cn_topic_0000001173164707_p19150193515381"></a><a name="zh-cn_topic_0000001173164707_p19150193515381"></a>类型</p>
288    </th>
289    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p31501935153812"><a name="zh-cn_topic_0000001173164707_p31501935153812"></a><a name="zh-cn_topic_0000001173164707_p31501935153812"></a>描述</p>
290    </th>
291    </tr>
292    </thead>
293    <tbody><tr id="zh-cn_topic_0000001173164707_row191502350385"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1115017358383"><a name="zh-cn_topic_0000001173164707_p1115017358383"></a><a name="zh-cn_topic_0000001173164707_p1115017358383"></a>text</p>
294    </td>
295    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p815043517389"><a name="zh-cn_topic_0000001173164707_p815043517389"></a><a name="zh-cn_topic_0000001173164707_p815043517389"></a>string</p>
296    </td>
297    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1150193510385"><a name="zh-cn_topic_0000001173164707_p1150193510385"></a><a name="zh-cn_topic_0000001173164707_p1150193510385"></a>需要绘制的文本内容。</p>
298    </td>
299    </tr>
300    <tr id="zh-cn_topic_0000001173164707_row81501835173814"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1215093523810"><a name="zh-cn_topic_0000001173164707_p1215093523810"></a><a name="zh-cn_topic_0000001173164707_p1215093523810"></a>x</p>
301    </td>
302    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p7150173583813"><a name="zh-cn_topic_0000001173164707_p7150173583813"></a><a name="zh-cn_topic_0000001173164707_p7150173583813"></a>number</p>
303    </td>
304    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p515011352383"><a name="zh-cn_topic_0000001173164707_p515011352383"></a><a name="zh-cn_topic_0000001173164707_p515011352383"></a>需要绘制的文本的左下角x坐标。</p>
305    </td>
306    </tr>
307    <tr id="zh-cn_topic_0000001173164707_row11150135183813"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p61506358386"><a name="zh-cn_topic_0000001173164707_p61506358386"></a><a name="zh-cn_topic_0000001173164707_p61506358386"></a>y</p>
308    </td>
309    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1515018356386"><a name="zh-cn_topic_0000001173164707_p1515018356386"></a><a name="zh-cn_topic_0000001173164707_p1515018356386"></a>number</p>
310    </td>
311    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p51503354387"><a name="zh-cn_topic_0000001173164707_p51503354387"></a><a name="zh-cn_topic_0000001173164707_p51503354387"></a>需要绘制的文本的左下角y坐标。</p>
312    </td>
313    </tr>
314    </tbody>
315    </table>
316
317-   返回值
318
319    无
320
321-   示例
322
323    ```
324    ctx.font = '35px sans-serif';
325    ctx.fillText("Hello World!", 20, 60);
326    ```
327
328    ![](figures/zh-cn_image_0000001166441656.png)
329
330
331## strokeText\(\)<a name="zh-cn_topic_0000001173164707_section4144191355810"></a>
332
333绘制描边类文本。
334
335-   参数
336
337    <a name="zh-cn_topic_0000001173164707_table26917485393"></a>
338    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row7719748133917"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p19719548153913"><a name="zh-cn_topic_0000001173164707_p19719548153913"></a><a name="zh-cn_topic_0000001173164707_p19719548153913"></a>参数</p>
339    </th>
340    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p8719114812395"><a name="zh-cn_topic_0000001173164707_p8719114812395"></a><a name="zh-cn_topic_0000001173164707_p8719114812395"></a>类型</p>
341    </th>
342    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p9719648163917"><a name="zh-cn_topic_0000001173164707_p9719648163917"></a><a name="zh-cn_topic_0000001173164707_p9719648163917"></a>描述</p>
343    </th>
344    </tr>
345    </thead>
346    <tbody><tr id="zh-cn_topic_0000001173164707_row1571915482398"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p9719204813392"><a name="zh-cn_topic_0000001173164707_p9719204813392"></a><a name="zh-cn_topic_0000001173164707_p9719204813392"></a>text</p>
347    </td>
348    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p371924883918"><a name="zh-cn_topic_0000001173164707_p371924883918"></a><a name="zh-cn_topic_0000001173164707_p371924883918"></a>string</p>
349    </td>
350    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1345116461512"><a name="zh-cn_topic_0000001173164707_p1345116461512"></a><a name="zh-cn_topic_0000001173164707_p1345116461512"></a>需要绘制的文本内容。</p>
351    </td>
352    </tr>
353    <tr id="zh-cn_topic_0000001173164707_row187191548183919"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p13719204810398"><a name="zh-cn_topic_0000001173164707_p13719204810398"></a><a name="zh-cn_topic_0000001173164707_p13719204810398"></a>x</p>
354    </td>
355    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1371912484399"><a name="zh-cn_topic_0000001173164707_p1371912484399"></a><a name="zh-cn_topic_0000001173164707_p1371912484399"></a>number</p>
356    </td>
357    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p245110469119"><a name="zh-cn_topic_0000001173164707_p245110469119"></a><a name="zh-cn_topic_0000001173164707_p245110469119"></a>需要绘制的文本的左下角x坐标。</p>
358    </td>
359    </tr>
360    <tr id="zh-cn_topic_0000001173164707_row5719114803911"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p671984814397"><a name="zh-cn_topic_0000001173164707_p671984814397"></a><a name="zh-cn_topic_0000001173164707_p671984814397"></a>y</p>
361    </td>
362    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p37192048113917"><a name="zh-cn_topic_0000001173164707_p37192048113917"></a><a name="zh-cn_topic_0000001173164707_p37192048113917"></a>number</p>
363    </td>
364    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p245114610113"><a name="zh-cn_topic_0000001173164707_p245114610113"></a><a name="zh-cn_topic_0000001173164707_p245114610113"></a>需要绘制的文本的左下角y坐标。</p>
365    </td>
366    </tr>
367    </tbody>
368    </table>
369
370-   返回值
371
372    无
373
374-   示例
375
376    ```
377    ctx.font = '25px sans-serif';
378    ctx.strokeText("Hello World!", 20, 60);
379    ```
380
381    ![](figures/zh-cn_image_0000001166601628.png)
382
383
384## measureText\(\)<a name="zh-cn_topic_0000001173164707_section378313153588"></a>
385
386该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
387
388-   参数
389
390    <a name="zh-cn_topic_0000001173164707_table9108632184010"></a>
391    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1412483234017"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p14124183212408"><a name="zh-cn_topic_0000001173164707_p14124183212408"></a><a name="zh-cn_topic_0000001173164707_p14124183212408"></a>参数</p>
392    </th>
393    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p141241328404"><a name="zh-cn_topic_0000001173164707_p141241328404"></a><a name="zh-cn_topic_0000001173164707_p141241328404"></a>类型</p>
394    </th>
395    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p15124632194011"><a name="zh-cn_topic_0000001173164707_p15124632194011"></a><a name="zh-cn_topic_0000001173164707_p15124632194011"></a>描述</p>
396    </th>
397    </tr>
398    </thead>
399    <tbody><tr id="zh-cn_topic_0000001173164707_row2124153244019"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p51241332134014"><a name="zh-cn_topic_0000001173164707_p51241332134014"></a><a name="zh-cn_topic_0000001173164707_p51241332134014"></a>text</p>
400    </td>
401    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p4124232134013"><a name="zh-cn_topic_0000001173164707_p4124232134013"></a><a name="zh-cn_topic_0000001173164707_p4124232134013"></a>string</p>
402    </td>
403    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p412413244010"><a name="zh-cn_topic_0000001173164707_p412413244010"></a><a name="zh-cn_topic_0000001173164707_p412413244010"></a>需要进行测量的文本。</p>
404    </td>
405    </tr>
406    </tbody>
407    </table>
408
409-   返回值
410
411    <a name="zh-cn_topic_0000001173164707_table7220542174013"></a>
412    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row423494215402"><th class="cellrowborder" valign="top" width="19.75%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001173164707_p17234942104015"><a name="zh-cn_topic_0000001173164707_p17234942104015"></a><a name="zh-cn_topic_0000001173164707_p17234942104015"></a>类型</p>
413    </th>
414    <th class="cellrowborder" valign="top" width="80.25%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001173164707_p523424244012"><a name="zh-cn_topic_0000001173164707_p523424244012"></a><a name="zh-cn_topic_0000001173164707_p523424244012"></a>说明</p>
415    </th>
416    </tr>
417    </thead>
418    <tbody><tr id="zh-cn_topic_0000001173164707_row112341042174013"><td class="cellrowborder" valign="top" width="19.75%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p82348423405"><a name="zh-cn_topic_0000001173164707_p82348423405"></a><a name="zh-cn_topic_0000001173164707_p82348423405"></a>TextMetrics</p>
419    </td>
420    <td class="cellrowborder" valign="top" width="80.25%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p0234134218407"><a name="zh-cn_topic_0000001173164707_p0234134218407"></a><a name="zh-cn_topic_0000001173164707_p0234134218407"></a>包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。</p>
421    </td>
422    </tr>
423    </tbody>
424    </table>
425
426-   示例
427
428    ```
429    ctx.font = '25px sans-serif';
430    var txt = 'Hello World';
431    ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60);
432    ctx.fillText(txt, 20, 110);
433    ```
434
435    ![](figures/zh-cn_image_0000001212161507.png)
436
437
438## lineWidth<a name="zh-cn_topic_0000001173164707_section652391716583"></a>
439
440指定绘制线条的宽度值。
441
442-   参数
443
444    <a name="zh-cn_topic_0000001173164707_table17891539144119"></a>
445    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1809639144111"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1180913399418"><a name="zh-cn_topic_0000001173164707_p1180913399418"></a><a name="zh-cn_topic_0000001173164707_p1180913399418"></a>参数</p>
446    </th>
447    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p480923915415"><a name="zh-cn_topic_0000001173164707_p480923915415"></a><a name="zh-cn_topic_0000001173164707_p480923915415"></a>类型</p>
448    </th>
449    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p580983913417"><a name="zh-cn_topic_0000001173164707_p580983913417"></a><a name="zh-cn_topic_0000001173164707_p580983913417"></a>描述</p>
450    </th>
451    </tr>
452    </thead>
453    <tbody><tr id="zh-cn_topic_0000001173164707_row380920398414"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p180913920418"><a name="zh-cn_topic_0000001173164707_p180913920418"></a><a name="zh-cn_topic_0000001173164707_p180913920418"></a>lineWidth</p>
454    </td>
455    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p19809203918412"><a name="zh-cn_topic_0000001173164707_p19809203918412"></a><a name="zh-cn_topic_0000001173164707_p19809203918412"></a>number</p>
456    </td>
457    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p10809183919414"><a name="zh-cn_topic_0000001173164707_p10809183919414"></a><a name="zh-cn_topic_0000001173164707_p10809183919414"></a>设置绘制线条的宽度。</p>
458    </td>
459    </tr>
460    </tbody>
461    </table>
462
463-   返回值
464
465    无
466
467-   示例
468
469    ```
470    ctx.lineWidth = 5;
471    ctx.strokeRect(25, 25, 85, 105);
472    ```
473
474    ![](figures/zh-cn_image_0000001212081545.png)
475
476
477## strokeStyle<a name="zh-cn_topic_0000001173164707_section1191517562337"></a>
478
479设置描边的颜色。
480
481-   参数
482
483    <a name="zh-cn_topic_0000001173164707_table1534725211489"></a>
484    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1536918529482"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p18369145254815"><a name="zh-cn_topic_0000001173164707_p18369145254815"></a><a name="zh-cn_topic_0000001173164707_p18369145254815"></a>参数</p>
485    </th>
486    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p173696523483"><a name="zh-cn_topic_0000001173164707_p173696523483"></a><a name="zh-cn_topic_0000001173164707_p173696523483"></a>类型</p>
487    </th>
488    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p936975274812"><a name="zh-cn_topic_0000001173164707_p936975274812"></a><a name="zh-cn_topic_0000001173164707_p936975274812"></a>描述</p>
489    </th>
490    </tr>
491    </thead>
492    <tbody><tr id="zh-cn_topic_0000001173164707_row20369155219485"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p13369152194810"><a name="zh-cn_topic_0000001173164707_p13369152194810"></a><a name="zh-cn_topic_0000001173164707_p13369152194810"></a>color</p>
493    </td>
494    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p236911525481"><a name="zh-cn_topic_0000001173164707_p236911525481"></a><a name="zh-cn_topic_0000001173164707_p236911525481"></a>&lt;color&gt;</p>
495    </td>
496    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p133695524481"><a name="zh-cn_topic_0000001173164707_p133695524481"></a><a name="zh-cn_topic_0000001173164707_p133695524481"></a>指定描边使用的颜色。</p>
497    </td>
498    </tr>
499    <tr id="zh-cn_topic_0000001173164707_row6369175274810"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p136985218484"><a name="zh-cn_topic_0000001173164707_p136985218484"></a><a name="zh-cn_topic_0000001173164707_p136985218484"></a>gradient</p>
500    </td>
501    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p43691152174819"><a name="zh-cn_topic_0000001173164707_p43691152174819"></a><a name="zh-cn_topic_0000001173164707_p43691152174819"></a>CanvasGradient</p>
502    </td>
503    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p143696525482"><a name="zh-cn_topic_0000001173164707_p143696525482"></a><a name="zh-cn_topic_0000001173164707_p143696525482"></a>通过createLinearGradient()方法创建。</p>
504    </td>
505    </tr>
506    <tr id="zh-cn_topic_0000001173164707_row636925214814"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p936995210482"><a name="zh-cn_topic_0000001173164707_p936995210482"></a><a name="zh-cn_topic_0000001173164707_p936995210482"></a>pattern</p>
507    </td>
508    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p836945224820"><a name="zh-cn_topic_0000001173164707_p836945224820"></a><a name="zh-cn_topic_0000001173164707_p836945224820"></a>CanvasPattern</p>
509    </td>
510    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p17369105219485"><a name="zh-cn_topic_0000001173164707_p17369105219485"></a><a name="zh-cn_topic_0000001173164707_p17369105219485"></a>通过createPattern()方法创建。</p>
511    </td>
512    </tr>
513    </tbody>
514    </table>
515
516-   返回值
517
518    无
519
520-   示例
521
522    ```
523    ctx.lineWidth = 10;
524    ctx.strokeStyle = '#0000ff';
525    ctx.strokeRect(25, 25, 155, 105);
526    ```
527
528    ![](figures/zh-cn_image_0000001166760178.png)
529
530
531## stroke\(\)<a name="zh-cn_topic_0000001173164707_section1071523411019"></a>
532
533进行边框绘制操作。
534
535-   参数
536
537    无
538
539-   返回值
540
541    无
542
543-   示例
544
545    ```
546    ctx.moveTo(25, 25);
547    ctx.lineTo(25, 105);
548    ctx.strokeStyle = 'rgb(0,0,255)';
549    ctx.stroke();
550    ```
551
552    ![](figures/zh-cn_image_0000001166920122.png)
553
554
555## beginPath\(\)<a name="zh-cn_topic_0000001173164707_section12670134392"></a>
556
557创建一个新的绘制路径。
558
559-   参数
560
561    无
562
563-   返回值
564
565    无
566
567-   示例
568
569    ```
570    ctx.beginPath();
571    ctx.lineWidth = '6';
572    ctx.strokeStyle = '#0000ff';
573    ctx.moveTo(15, 80);
574    ctx.lineTo(280, 160);
575    ctx.stroke();
576    ```
577
578    ![](figures/zh-cn_image_0000001212320081.png)
579
580
581## moveTo\(\)<a name="zh-cn_topic_0000001173164707_section16813157310"></a>
582
583路径从当前点移动到指定点。
584
585-   参数
586
587    <a name="zh-cn_topic_0000001173164707_table6168163119523"></a>
588    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row718813118525"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1018812317521"><a name="zh-cn_topic_0000001173164707_p1018812317521"></a><a name="zh-cn_topic_0000001173164707_p1018812317521"></a>参数</p>
589    </th>
590    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1718812319522"><a name="zh-cn_topic_0000001173164707_p1718812319522"></a><a name="zh-cn_topic_0000001173164707_p1718812319522"></a>类型</p>
591    </th>
592    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p1818893118526"><a name="zh-cn_topic_0000001173164707_p1818893118526"></a><a name="zh-cn_topic_0000001173164707_p1818893118526"></a>描述</p>
593    </th>
594    </tr>
595    </thead>
596    <tbody><tr id="zh-cn_topic_0000001173164707_row918893175210"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p11188231135210"><a name="zh-cn_topic_0000001173164707_p11188231135210"></a><a name="zh-cn_topic_0000001173164707_p11188231135210"></a>x</p>
597    </td>
598    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p151888317527"><a name="zh-cn_topic_0000001173164707_p151888317527"></a><a name="zh-cn_topic_0000001173164707_p151888317527"></a>number</p>
599    </td>
600    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p2018811311525"><a name="zh-cn_topic_0000001173164707_p2018811311525"></a><a name="zh-cn_topic_0000001173164707_p2018811311525"></a>指定位置的x坐标。</p>
601    </td>
602    </tr>
603    <tr id="zh-cn_topic_0000001173164707_row7188731185211"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p161881131155213"><a name="zh-cn_topic_0000001173164707_p161881131155213"></a><a name="zh-cn_topic_0000001173164707_p161881131155213"></a>y</p>
604    </td>
605    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1118863119528"><a name="zh-cn_topic_0000001173164707_p1118863119528"></a><a name="zh-cn_topic_0000001173164707_p1118863119528"></a>number</p>
606    </td>
607    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p121881431135219"><a name="zh-cn_topic_0000001173164707_p121881431135219"></a><a name="zh-cn_topic_0000001173164707_p121881431135219"></a>指定位置的y坐标。</p>
608    </td>
609    </tr>
610    </tbody>
611    </table>
612
613-   返回值
614
615    无
616
617-   示例
618
619    ```
620    ctx.beginPath();
621    ctx.moveTo(10, 10);
622    ctx.lineTo(280, 160);
623    ctx.stroke();
624    ```
625
626    ![](figures/zh-cn_image_0000001212440083.png)
627
628
629## lineTo\(\)<a name="zh-cn_topic_0000001173164707_section4767915838"></a>
630
631从当前点到指定点进行路径连接。
632
633-   参数
634
635    <a name="zh-cn_topic_0000001173164707_table05782010185317"></a>
636    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row115971910155315"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p10597310185318"><a name="zh-cn_topic_0000001173164707_p10597310185318"></a><a name="zh-cn_topic_0000001173164707_p10597310185318"></a>参数</p>
637    </th>
638    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p659741010538"><a name="zh-cn_topic_0000001173164707_p659741010538"></a><a name="zh-cn_topic_0000001173164707_p659741010538"></a>类型</p>
639    </th>
640    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p859731055315"><a name="zh-cn_topic_0000001173164707_p859731055315"></a><a name="zh-cn_topic_0000001173164707_p859731055315"></a>描述</p>
641    </th>
642    </tr>
643    </thead>
644    <tbody><tr id="zh-cn_topic_0000001173164707_row65971610135310"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p135975108534"><a name="zh-cn_topic_0000001173164707_p135975108534"></a><a name="zh-cn_topic_0000001173164707_p135975108534"></a>x</p>
645    </td>
646    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1259751035317"><a name="zh-cn_topic_0000001173164707_p1259751035317"></a><a name="zh-cn_topic_0000001173164707_p1259751035317"></a>number</p>
647    </td>
648    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p6597161085317"><a name="zh-cn_topic_0000001173164707_p6597161085317"></a><a name="zh-cn_topic_0000001173164707_p6597161085317"></a>指定位置的x坐标。</p>
649    </td>
650    </tr>
651    <tr id="zh-cn_topic_0000001173164707_row9597111045310"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p105977106537"><a name="zh-cn_topic_0000001173164707_p105977106537"></a><a name="zh-cn_topic_0000001173164707_p105977106537"></a>y</p>
652    </td>
653    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p7597110205313"><a name="zh-cn_topic_0000001173164707_p7597110205313"></a><a name="zh-cn_topic_0000001173164707_p7597110205313"></a>number</p>
654    </td>
655    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p175971010185313"><a name="zh-cn_topic_0000001173164707_p175971010185313"></a><a name="zh-cn_topic_0000001173164707_p175971010185313"></a>指定位置的y坐标。</p>
656    </td>
657    </tr>
658    </tbody>
659    </table>
660
661-   返回值
662
663    无
664
665-   示例
666
667    ```
668    ctx.beginPath();
669    ctx.moveTo(10, 10);
670    ctx.lineTo(280, 160);
671    ctx.stroke();
672    ```
673
674    ![](figures/zh-cn_image_0000001166441658.png)
675
676
677## closePath\(\)<a name="zh-cn_topic_0000001173164707_section86825473917"></a>
678
679结束当前路径形成一个封闭路径。
680
681-   参数
682
683    无
684
685-   返回值
686
687    无
688
689-   示例
690
691    ```
692    ctx.beginPath();
693    ctx.moveTo(30, 30);
694    ctx.lineTo(110, 30);
695    ctx.lineTo(70, 90);
696    ctx.closePath();
697    ctx.stroke();
698    ```
699
700    ![](figures/zh-cn_image_0000001166601630.png)
701
702
703## lineCap<a name="zh-cn_topic_0000001173164707_section6852133718410"></a>
704
705指定线端点的样式。
706
707-   参数
708
709    <a name="zh-cn_topic_0000001173164707_table370016264426"></a>
710    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row197237269420"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p172302664212"><a name="zh-cn_topic_0000001173164707_p172302664212"></a><a name="zh-cn_topic_0000001173164707_p172302664212"></a>参数</p>
711    </th>
712    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p672392611421"><a name="zh-cn_topic_0000001173164707_p672392611421"></a><a name="zh-cn_topic_0000001173164707_p672392611421"></a>类型</p>
713    </th>
714    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p18723142620426"><a name="zh-cn_topic_0000001173164707_p18723142620426"></a><a name="zh-cn_topic_0000001173164707_p18723142620426"></a>描述</p>
715    </th>
716    </tr>
717    </thead>
718    <tbody><tr id="zh-cn_topic_0000001173164707_row4723142619429"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p172302620422"><a name="zh-cn_topic_0000001173164707_p172302620422"></a><a name="zh-cn_topic_0000001173164707_p172302620422"></a>lineCap</p>
719    </td>
720    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p572313267429"><a name="zh-cn_topic_0000001173164707_p572313267429"></a><a name="zh-cn_topic_0000001173164707_p572313267429"></a>string</p>
721    </td>
722    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1772310269428"><a name="zh-cn_topic_0000001173164707_p1772310269428"></a><a name="zh-cn_topic_0000001173164707_p1772310269428"></a>线条的端点样式，可选值为：</p>
723    <a name="zh-cn_topic_0000001173164707_ul9807121877"></a><a name="zh-cn_topic_0000001173164707_ul9807121877"></a><ul id="zh-cn_topic_0000001173164707_ul9807121877"><li>butt（默认）：线端点以方形结束。</li><li>round：线端点以圆形结束。</li><li>square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。</li></ul>
724    </td>
725    </tr>
726    </tbody>
727    </table>
728
729-   返回值
730
731    无
732
733-   示例
734
735    ```
736    ctx.lineWidth = 8;
737    ctx.beginPath();
738    ctx.lineCap = 'round';
739    ctx.moveTo(30, 50);
740    ctx.lineTo(220, 50);
741    ctx.stroke();
742    ```
743
744    ![](figures/zh-cn_image_0000001212161509.png)
745
746
747## lineJoin<a name="zh-cn_topic_0000001173164707_section395812401442"></a>
748
749指定线段间相交的交点样式。
750
751-   参数
752
753    <a name="zh-cn_topic_0000001173164707_table32162018433"></a>
754    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1825620104314"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1425122074313"><a name="zh-cn_topic_0000001173164707_p1425122074313"></a><a name="zh-cn_topic_0000001173164707_p1425122074313"></a>参数</p>
755    </th>
756    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p425112004316"><a name="zh-cn_topic_0000001173164707_p425112004316"></a><a name="zh-cn_topic_0000001173164707_p425112004316"></a>类型</p>
757    </th>
758    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p142515206438"><a name="zh-cn_topic_0000001173164707_p142515206438"></a><a name="zh-cn_topic_0000001173164707_p142515206438"></a>描述</p>
759    </th>
760    </tr>
761    </thead>
762    <tbody><tr id="zh-cn_topic_0000001173164707_row1251220154315"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1825132016431"><a name="zh-cn_topic_0000001173164707_p1825132016431"></a><a name="zh-cn_topic_0000001173164707_p1825132016431"></a>lineJoin</p>
763    </td>
764    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p152562012436"><a name="zh-cn_topic_0000001173164707_p152562012436"></a><a name="zh-cn_topic_0000001173164707_p152562012436"></a>string</p>
765    </td>
766    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p125162019435"><a name="zh-cn_topic_0000001173164707_p125162019435"></a><a name="zh-cn_topic_0000001173164707_p125162019435"></a>线条的交点样式，可选值为：</p>
767    <a name="zh-cn_topic_0000001173164707_ul1717215412215"></a><a name="zh-cn_topic_0000001173164707_ul1717215412215"></a><ul id="zh-cn_topic_0000001173164707_ul1717215412215"><li>round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。</li><li>bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。</li><li>miter（默认）：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。</li></ul>
768    </td>
769    </tr>
770    </tbody>
771    </table>
772
773-   返回值
774
775    无
776
777-   示例
778
779    ```
780    ctx.beginPath();
781    ctx.lineWidth = 8;
782    ctx.lineJoin = 'miter';
783    ctx.moveTo(30, 30);
784    ctx.lineTo(120, 60);
785    ctx.lineTo(30, 110);
786    ctx.stroke();
787    ```
788
789    ![](figures/zh-cn_image_0000001212081549.png)
790
791
792## miterLimit<a name="zh-cn_topic_0000001173164707_section429711421945"></a>
793
794设置斜接面限制值，该值指定了线条相交处内角和外角的距离。
795
796-   参数
797
798    <a name="zh-cn_topic_0000001173164707_table1097514385448"></a>
799    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row20997538104419"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p699753818446"><a name="zh-cn_topic_0000001173164707_p699753818446"></a><a name="zh-cn_topic_0000001173164707_p699753818446"></a>参数</p>
800    </th>
801    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p59971338204410"><a name="zh-cn_topic_0000001173164707_p59971338204410"></a><a name="zh-cn_topic_0000001173164707_p59971338204410"></a>类型</p>
802    </th>
803    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p119970385446"><a name="zh-cn_topic_0000001173164707_p119970385446"></a><a name="zh-cn_topic_0000001173164707_p119970385446"></a>描述</p>
804    </th>
805    </tr>
806    </thead>
807    <tbody><tr id="zh-cn_topic_0000001173164707_row1599711383441"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p13997203818448"><a name="zh-cn_topic_0000001173164707_p13997203818448"></a><a name="zh-cn_topic_0000001173164707_p13997203818448"></a>miterLimit</p>
808    </td>
809    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1099773884410"><a name="zh-cn_topic_0000001173164707_p1099773884410"></a><a name="zh-cn_topic_0000001173164707_p1099773884410"></a>number</p>
810    </td>
811    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1799711382448"><a name="zh-cn_topic_0000001173164707_p1799711382448"></a><a name="zh-cn_topic_0000001173164707_p1799711382448"></a>斜接面限制值，该属性默认值为10。</p>
812    </td>
813    </tr>
814    </tbody>
815    </table>
816
817-   返回值
818
819    无
820
821-   示例
822
823    ```
824    ctx.lineWidth = 8;
825    ctx.lineJoin = 'miter';
826    ctx.miterLimit = 3;
827    ctx.moveTo(30, 30);
828    ctx.lineTo(60, 35);
829    ctx.lineTo(30, 37);
830    ctx.stroke();
831    ```
832
833    ![](figures/zh-cn_image_0000001166760180.png)
834
835
836## font<a name="zh-cn_topic_0000001173164707_section17597332121110"></a>
837
838设置文本绘制中的字体样式。
839
840-   参数
841
842    <a name="zh-cn_topic_0000001173164707_table0971429451"></a>
843    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row71163425451"><th class="cellrowborder" valign="top" width="10.525252525252524%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p20116144294520"><a name="zh-cn_topic_0000001173164707_p20116144294520"></a><a name="zh-cn_topic_0000001173164707_p20116144294520"></a>参数</p>
844    </th>
845    <th class="cellrowborder" valign="top" width="12.131313131313131%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p6116114214454"><a name="zh-cn_topic_0000001173164707_p6116114214454"></a><a name="zh-cn_topic_0000001173164707_p6116114214454"></a>类型</p>
846    </th>
847    <th class="cellrowborder" valign="top" width="77.34343434343435%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p181162042194519"><a name="zh-cn_topic_0000001173164707_p181162042194519"></a><a name="zh-cn_topic_0000001173164707_p181162042194519"></a>描述</p>
848    </th>
849    </tr>
850    </thead>
851    <tbody><tr id="zh-cn_topic_0000001173164707_row21171642124516"><td class="cellrowborder" valign="top" width="10.525252525252524%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p15117642164510"><a name="zh-cn_topic_0000001173164707_p15117642164510"></a><a name="zh-cn_topic_0000001173164707_p15117642164510"></a>value</p>
852    </td>
853    <td class="cellrowborder" valign="top" width="12.131313131313131%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p8117742114515"><a name="zh-cn_topic_0000001173164707_p8117742114515"></a><a name="zh-cn_topic_0000001173164707_p8117742114515"></a>string</p>
854    </td>
855    <td class="cellrowborder" valign="top" width="77.34343434343435%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1711724219453"><a name="zh-cn_topic_0000001173164707_p1711724219453"></a><a name="zh-cn_topic_0000001173164707_p1711724219453"></a>字体样式支持：sans-serif, serif, monospace，<span id="zh-cn_topic_0000001173164707_ph065925143115"><a name="zh-cn_topic_0000001173164707_ph065925143115"></a><a name="zh-cn_topic_0000001173164707_ph065925143115"></a>该属性默认值为14px sans-serif</span>。</p>
856    <p id="zh-cn_topic_0000001173164707_p436195718191"><a name="zh-cn_topic_0000001173164707_p436195718191"></a><a name="zh-cn_topic_0000001173164707_p436195718191"></a>语法：ctx.font="font-style font-weight font-size font-family"<sup id="zh-cn_topic_0000001173164707_sup17486202715112"><a name="zh-cn_topic_0000001173164707_sup17486202715112"></a><a name="zh-cn_topic_0000001173164707_sup17486202715112"></a><span>5+</span></sup></p>
857    <p id="zh-cn_topic_0000001173164707_p152526210221"><a name="zh-cn_topic_0000001173164707_p152526210221"></a><a name="zh-cn_topic_0000001173164707_p152526210221"></a>默认值："normal normal 14px sans-serif"</p>
858    <a name="zh-cn_topic_0000001173164707_ul1984020379012"></a><a name="zh-cn_topic_0000001173164707_ul1984020379012"></a><ul id="zh-cn_topic_0000001173164707_ul1984020379012"><li>font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic。</li><li>font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。</li><li>font-size(可选)，指定字号和行高，单位只支持px，默认值14px。</li><li>font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。</li></ul>
859    </td>
860    </tr>
861    </tbody>
862    </table>
863
864-   返回值
865
866    无
867
868-   示例
869
870    ```
871    ctx.font = '30px sans-serif';
872    ctx.fillText("Hello World", 20, 60);
873    ```
874
875    ![](figures/zh-cn_image_0000001166920126.png)
876
877
878## textAlign<a name="zh-cn_topic_0000001173164707_section15681153321114"></a>
879
880设置文本绘制中的文本对齐方式。
881
882-   参数
883
884    <a name="zh-cn_topic_0000001173164707_table73131824144612"></a>
885    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row532818249469"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p132816246468"><a name="zh-cn_topic_0000001173164707_p132816246468"></a><a name="zh-cn_topic_0000001173164707_p132816246468"></a>参数</p>
886    </th>
887    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p532882424617"><a name="zh-cn_topic_0000001173164707_p532882424617"></a><a name="zh-cn_topic_0000001173164707_p532882424617"></a>类型</p>
888    </th>
889    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p15328122415465"><a name="zh-cn_topic_0000001173164707_p15328122415465"></a><a name="zh-cn_topic_0000001173164707_p15328122415465"></a>描述</p>
890    </th>
891    </tr>
892    </thead>
893    <tbody><tr id="zh-cn_topic_0000001173164707_row103286247461"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p132917244468"><a name="zh-cn_topic_0000001173164707_p132917244468"></a><a name="zh-cn_topic_0000001173164707_p132917244468"></a>align</p>
894    </td>
895    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p123296247468"><a name="zh-cn_topic_0000001173164707_p123296247468"></a><a name="zh-cn_topic_0000001173164707_p123296247468"></a>string</p>
896    </td>
897    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p6170185410516"><a name="zh-cn_topic_0000001173164707_p6170185410516"></a><a name="zh-cn_topic_0000001173164707_p6170185410516"></a>可选值为：</p>
898    <a name="zh-cn_topic_0000001173164707_ul12274577810"></a><a name="zh-cn_topic_0000001173164707_ul12274577810"></a><ul id="zh-cn_topic_0000001173164707_ul12274577810"><li>left（默认）：文本左对齐。</li><li>right：文本右对齐。</li><li>center：文本居中对齐。</li><li>start：文本对齐界线开始的地方。</li><li>end：文本对齐接线结束的地方。</li></ul>
899    <div class="note" id="zh-cn_topic_0000001173164707_note1344535811710"><a name="zh-cn_topic_0000001173164707_note1344535811710"></a><a name="zh-cn_topic_0000001173164707_note1344535811710"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173164707_p1854535417539"><a name="zh-cn_topic_0000001173164707_p1854535417539"></a><a name="zh-cn_topic_0000001173164707_p1854535417539"></a>ltr布局模式下start和left一致，rtl布局模式下start和right一致&middot;。</p>
900    </div></div>
901    </td>
902    </tr>
903    </tbody>
904    </table>
905
906-   返回值
907
908    无
909
910-   示例
911
912    ```
913    ctx.strokeStyle = '#0000ff';
914    ctx.moveTo(140, 10);
915    ctx.lineTo(140, 160);
916    ctx.stroke();
917
918    ctx.font = '18px sans-serif';
919
920    // Show the different textAlign values
921    ctx.textAlign = 'start';
922    ctx.fillText('textAlign=start', 140, 60);
923    ctx.textAlign = 'end';
924    ctx.fillText('textAlign=end', 140, 80);
925    ctx.textAlign = 'left';
926    ctx.fillText('textAlign=left', 140, 100);
927    ctx.textAlign = 'center';
928    ctx.fillText('textAlign=center',140, 120);
929    ctx.textAlign = 'right';
930    ctx.fillText('textAlign=right',140, 140);
931    ```
932
933    ![](figures/zh-cn_image_0000001212320083.png)
934
935
936## textBaseline<a name="zh-cn_topic_0000001173164707_section77981136141111"></a>
937
938设置文本绘制中的水平对齐方式。
939
940-   参数
941
942    <a name="zh-cn_topic_0000001173164707_table7291181034711"></a>
943    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row20362910144715"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p143621010174717"><a name="zh-cn_topic_0000001173164707_p143621010174717"></a><a name="zh-cn_topic_0000001173164707_p143621010174717"></a>参数</p>
944    </th>
945    <th class="cellrowborder" valign="top" width="14.939393939393941%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1336201014716"><a name="zh-cn_topic_0000001173164707_p1336201014716"></a><a name="zh-cn_topic_0000001173164707_p1336201014716"></a>类型</p>
946    </th>
947    <th class="cellrowborder" valign="top" width="51.727272727272734%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p18362310124718"><a name="zh-cn_topic_0000001173164707_p18362310124718"></a><a name="zh-cn_topic_0000001173164707_p18362310124718"></a>描述</p>
948    </th>
949    </tr>
950    </thead>
951    <tbody><tr id="zh-cn_topic_0000001173164707_row11362141010475"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p163621110144715"><a name="zh-cn_topic_0000001173164707_p163621110144715"></a><a name="zh-cn_topic_0000001173164707_p163621110144715"></a>textBaseline</p>
952    </td>
953    <td class="cellrowborder" valign="top" width="14.939393939393941%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p183621610104715"><a name="zh-cn_topic_0000001173164707_p183621610104715"></a><a name="zh-cn_topic_0000001173164707_p183621610104715"></a>string</p>
954    </td>
955    <td class="cellrowborder" valign="top" width="51.727272727272734%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p711415819554"><a name="zh-cn_topic_0000001173164707_p711415819554"></a><a name="zh-cn_topic_0000001173164707_p711415819554"></a>可选值为：</p>
956    <a name="zh-cn_topic_0000001173164707_ul155261019389"></a><a name="zh-cn_topic_0000001173164707_ul155261019389"></a><ul id="zh-cn_topic_0000001173164707_ul155261019389"><li>alphabetic（默认）：文本基线是标准的字母基线。</li><li>top：文本基线在文本块的顶部。</li><li>hanging：文本基线是悬挂基线。</li><li>middle：文本基线在文本块的中间。</li><li>ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。</li><li>bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。</li></ul>
957    </td>
958    </tr>
959    </tbody>
960    </table>
961
962-   返回值
963
964    无
965
966-   示例
967
968    ```
969    ctx.strokeStyle = '#0000ff';
970    ctx.moveTo(0, 120);
971    ctx.lineTo(400, 120);
972    ctx.stroke();
973
974    ctx.font = '20px sans-serif';
975
976    ctx.textBaseline = 'top';
977    ctx.fillText('Top', 10, 120);
978    ctx.textBaseline = 'bottom';
979    ctx.fillText('Bottom', 55, 120);
980    ctx.textBaseline = 'middle';
981    ctx.fillText('Middle', 125, 120);
982    ctx.textBaseline = 'alphabetic';
983    ctx.fillText('Alphabetic', 195, 120);
984    ctx.textBaseline = 'hanging';
985    ctx.fillText('Hanging', 295, 120);
986    ```
987
988    ![](figures/zh-cn_image_0000001166441662.png)
989
990
991## createPattern\(\)<a name="zh-cn_topic_0000001173164707_section1034582183919"></a>
992
993通过指定图像和重复方式创建图片填充的模板。
994
995-   参数
996
997    <a name="zh-cn_topic_0000001173164707_table10856104714495"></a>
998    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row6877547164915"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p087713474499"><a name="zh-cn_topic_0000001173164707_p087713474499"></a><a name="zh-cn_topic_0000001173164707_p087713474499"></a>参数</p>
999    </th>
1000    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1877147104920"><a name="zh-cn_topic_0000001173164707_p1877147104920"></a><a name="zh-cn_topic_0000001173164707_p1877147104920"></a>类型</p>
1001    </th>
1002    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p17877144714910"><a name="zh-cn_topic_0000001173164707_p17877144714910"></a><a name="zh-cn_topic_0000001173164707_p17877144714910"></a>描述</p>
1003    </th>
1004    </tr>
1005    </thead>
1006    <tbody><tr id="zh-cn_topic_0000001173164707_row1387716471496"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p16877134713496"><a name="zh-cn_topic_0000001173164707_p16877134713496"></a><a name="zh-cn_topic_0000001173164707_p16877134713496"></a>image</p>
1007    </td>
1008    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p12877174784912"><a name="zh-cn_topic_0000001173164707_p12877174784912"></a><a name="zh-cn_topic_0000001173164707_p12877174784912"></a>Image</p>
1009    </td>
1010    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p12877164716490"><a name="zh-cn_topic_0000001173164707_p12877164716490"></a><a name="zh-cn_topic_0000001173164707_p12877164716490"></a>图源对象，具体参考<a href="js-components-canvas-image.md">Image对象</a>。</p>
1011    </td>
1012    </tr>
1013    <tr id="zh-cn_topic_0000001173164707_row1887711479493"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p787764720494"><a name="zh-cn_topic_0000001173164707_p787764720494"></a><a name="zh-cn_topic_0000001173164707_p787764720494"></a>repetition</p>
1014    </td>
1015    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p387724714916"><a name="zh-cn_topic_0000001173164707_p387724714916"></a><a name="zh-cn_topic_0000001173164707_p387724714916"></a>string</p>
1016    </td>
1017    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1787724716495"><a name="zh-cn_topic_0000001173164707_p1787724716495"></a><a name="zh-cn_topic_0000001173164707_p1787724716495"></a>设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。</p>
1018    </td>
1019    </tr>
1020    </tbody>
1021    </table>
1022
1023-   返回值
1024
1025    <a name="zh-cn_topic_0000001173164707_table1693355133112"></a>
1026    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row49339514317"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001173164707_p17933145116314"><a name="zh-cn_topic_0000001173164707_p17933145116314"></a><a name="zh-cn_topic_0000001173164707_p17933145116314"></a>类型</p>
1027    </th>
1028    <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001173164707_p15933155113310"><a name="zh-cn_topic_0000001173164707_p15933155113310"></a><a name="zh-cn_topic_0000001173164707_p15933155113310"></a>说明</p>
1029    </th>
1030    </tr>
1031    </thead>
1032    <tbody><tr id="zh-cn_topic_0000001173164707_row10934951103110"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p11934145123116"><a name="zh-cn_topic_0000001173164707_p11934145123116"></a><a name="zh-cn_topic_0000001173164707_p11934145123116"></a>Object</p>
1033    </td>
1034    <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p16934351123117"><a name="zh-cn_topic_0000001173164707_p16934351123117"></a><a name="zh-cn_topic_0000001173164707_p16934351123117"></a>指定图像填充的Pattern对象。</p>
1035    </td>
1036    </tr>
1037    </tbody>
1038    </table>
1039
1040-   示例
1041
1042    ```
1043    var pat = ctx.createPattern(img, 'repeat');
1044    ctx.fillStyle = pat;
1045    ctx.fillRect(0, 0, 20, 20);
1046    ```
1047
1048    ![](figures/zh-cn_image_0000001166601632.png)
1049
1050
1051## bezierCurveTo\(\)<a name="zh-cn_topic_0000001173164707_section450521614318"></a>
1052
1053创建三次贝赛尔曲线的路径。
1054
1055-   参数
1056
1057    <a name="zh-cn_topic_0000001173164707_table20386105825314"></a>
1058    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row15411458165315"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1411155895315"><a name="zh-cn_topic_0000001173164707_p1411155895315"></a><a name="zh-cn_topic_0000001173164707_p1411155895315"></a>参数</p>
1059    </th>
1060    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1541119580533"><a name="zh-cn_topic_0000001173164707_p1541119580533"></a><a name="zh-cn_topic_0000001173164707_p1541119580533"></a>类型</p>
1061    </th>
1062    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p84112058145319"><a name="zh-cn_topic_0000001173164707_p84112058145319"></a><a name="zh-cn_topic_0000001173164707_p84112058145319"></a>描述</p>
1063    </th>
1064    </tr>
1065    </thead>
1066    <tbody><tr id="zh-cn_topic_0000001173164707_row194112586539"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p23609395194"><a name="zh-cn_topic_0000001173164707_p23609395194"></a><a name="zh-cn_topic_0000001173164707_p23609395194"></a>cp1x</p>
1067    </td>
1068    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p173603394190"><a name="zh-cn_topic_0000001173164707_p173603394190"></a><a name="zh-cn_topic_0000001173164707_p173603394190"></a>number</p>
1069    </td>
1070    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p18360203981915"><a name="zh-cn_topic_0000001173164707_p18360203981915"></a><a name="zh-cn_topic_0000001173164707_p18360203981915"></a>第一个贝塞尔参数的x坐标值。</p>
1071    </td>
1072    </tr>
1073    <tr id="zh-cn_topic_0000001173164707_row141135810535"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p336023910194"><a name="zh-cn_topic_0000001173164707_p336023910194"></a><a name="zh-cn_topic_0000001173164707_p336023910194"></a>cp1y</p>
1074    </td>
1075    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p20360173918194"><a name="zh-cn_topic_0000001173164707_p20360173918194"></a><a name="zh-cn_topic_0000001173164707_p20360173918194"></a>number</p>
1076    </td>
1077    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p13605397190"><a name="zh-cn_topic_0000001173164707_p13605397190"></a><a name="zh-cn_topic_0000001173164707_p13605397190"></a>第一个贝塞尔参数的y坐标值。</p>
1078    </td>
1079    </tr>
1080    <tr id="zh-cn_topic_0000001173164707_row164111358105315"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p17361123981919"><a name="zh-cn_topic_0000001173164707_p17361123981919"></a><a name="zh-cn_topic_0000001173164707_p17361123981919"></a>cp2x</p>
1081    </td>
1082    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p5361173901917"><a name="zh-cn_topic_0000001173164707_p5361173901917"></a><a name="zh-cn_topic_0000001173164707_p5361173901917"></a>number</p>
1083    </td>
1084    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p736183918197"><a name="zh-cn_topic_0000001173164707_p736183918197"></a><a name="zh-cn_topic_0000001173164707_p736183918197"></a>第二个贝塞尔参数的x坐标值。</p>
1085    </td>
1086    </tr>
1087    <tr id="zh-cn_topic_0000001173164707_row185982415541"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p5361113911199"><a name="zh-cn_topic_0000001173164707_p5361113911199"></a><a name="zh-cn_topic_0000001173164707_p5361113911199"></a>cp2y</p>
1088    </td>
1089    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p15361139171916"><a name="zh-cn_topic_0000001173164707_p15361139171916"></a><a name="zh-cn_topic_0000001173164707_p15361139171916"></a>number</p>
1090    </td>
1091    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p23611039151912"><a name="zh-cn_topic_0000001173164707_p23611039151912"></a><a name="zh-cn_topic_0000001173164707_p23611039151912"></a>第二个贝塞尔参数的y坐标值。</p>
1092    </td>
1093    </tr>
1094    <tr id="zh-cn_topic_0000001173164707_row826242931913"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p17361143918198"><a name="zh-cn_topic_0000001173164707_p17361143918198"></a><a name="zh-cn_topic_0000001173164707_p17361143918198"></a>x</p>
1095    </td>
1096    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p173611539131920"><a name="zh-cn_topic_0000001173164707_p173611539131920"></a><a name="zh-cn_topic_0000001173164707_p173611539131920"></a>number</p>
1097    </td>
1098    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p10361339111918"><a name="zh-cn_topic_0000001173164707_p10361339111918"></a><a name="zh-cn_topic_0000001173164707_p10361339111918"></a>路径结束时的x坐标值。</p>
1099    </td>
1100    </tr>
1101    <tr id="zh-cn_topic_0000001173164707_row1045602931913"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p14361193916194"><a name="zh-cn_topic_0000001173164707_p14361193916194"></a><a name="zh-cn_topic_0000001173164707_p14361193916194"></a>y</p>
1102    </td>
1103    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p23612039131914"><a name="zh-cn_topic_0000001173164707_p23612039131914"></a><a name="zh-cn_topic_0000001173164707_p23612039131914"></a>number</p>
1104    </td>
1105    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p183611739201916"><a name="zh-cn_topic_0000001173164707_p183611739201916"></a><a name="zh-cn_topic_0000001173164707_p183611739201916"></a>路径结束时的y坐标值。</p>
1106    </td>
1107    </tr>
1108    </tbody>
1109    </table>
1110
1111-   返回值
1112
1113    无
1114
1115-   示例
1116
1117    ```
1118    ctx.beginPath();
1119    ctx.moveTo(10, 10);
1120    ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
1121    ctx.stroke();
1122    ```
1123
1124    ![](figures/zh-cn_image_0000001212161513.png)
1125
1126
1127## quadraticCurveTo\(\)<a name="zh-cn_topic_0000001173164707_section12938183173"></a>
1128
1129创建二次贝赛尔曲线的路径。
1130
1131-   参数
1132
1133    <a name="zh-cn_topic_0000001173164707_table109941430581"></a>
1134    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1499443014812"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p179941301485"><a name="zh-cn_topic_0000001173164707_p179941301485"></a><a name="zh-cn_topic_0000001173164707_p179941301485"></a>参数</p>
1135    </th>
1136    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p09941330382"><a name="zh-cn_topic_0000001173164707_p09941330382"></a><a name="zh-cn_topic_0000001173164707_p09941330382"></a>类型</p>
1137    </th>
1138    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p499411309812"><a name="zh-cn_topic_0000001173164707_p499411309812"></a><a name="zh-cn_topic_0000001173164707_p499411309812"></a>描述</p>
1139    </th>
1140    </tr>
1141    </thead>
1142    <tbody><tr id="zh-cn_topic_0000001173164707_row189942307819"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1541115588531"><a name="zh-cn_topic_0000001173164707_p1541115588531"></a><a name="zh-cn_topic_0000001173164707_p1541115588531"></a>cpx</p>
1143    </td>
1144    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p5411158115317"><a name="zh-cn_topic_0000001173164707_p5411158115317"></a><a name="zh-cn_topic_0000001173164707_p5411158115317"></a>number</p>
1145    </td>
1146    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p14111558175312"><a name="zh-cn_topic_0000001173164707_p14111558175312"></a><a name="zh-cn_topic_0000001173164707_p14111558175312"></a>贝塞尔参数的x坐标值。</p>
1147    </td>
1148    </tr>
1149    <tr id="zh-cn_topic_0000001173164707_row179951630484"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p641135820539"><a name="zh-cn_topic_0000001173164707_p641135820539"></a><a name="zh-cn_topic_0000001173164707_p641135820539"></a>cpy</p>
1150    </td>
1151    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1441111584532"><a name="zh-cn_topic_0000001173164707_p1441111584532"></a><a name="zh-cn_topic_0000001173164707_p1441111584532"></a>number</p>
1152    </td>
1153    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p44114580539"><a name="zh-cn_topic_0000001173164707_p44114580539"></a><a name="zh-cn_topic_0000001173164707_p44114580539"></a>贝塞尔参数的y坐标值。</p>
1154    </td>
1155    </tr>
1156    <tr id="zh-cn_topic_0000001173164707_row13995183015811"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p44111958135320"><a name="zh-cn_topic_0000001173164707_p44111958135320"></a><a name="zh-cn_topic_0000001173164707_p44111958135320"></a>x</p>
1157    </td>
1158    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p14111358115313"><a name="zh-cn_topic_0000001173164707_p14111358115313"></a><a name="zh-cn_topic_0000001173164707_p14111358115313"></a>number</p>
1159    </td>
1160    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p2411115835318"><a name="zh-cn_topic_0000001173164707_p2411115835318"></a><a name="zh-cn_topic_0000001173164707_p2411115835318"></a>路径结束时的x坐标值。</p>
1161    </td>
1162    </tr>
1163    <tr id="zh-cn_topic_0000001173164707_row149953301482"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p173571755546"><a name="zh-cn_topic_0000001173164707_p173571755546"></a><a name="zh-cn_topic_0000001173164707_p173571755546"></a>y</p>
1164    </td>
1165    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p43588511540"><a name="zh-cn_topic_0000001173164707_p43588511540"></a><a name="zh-cn_topic_0000001173164707_p43588511540"></a>number</p>
1166    </td>
1167    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1635875105417"><a name="zh-cn_topic_0000001173164707_p1635875105417"></a><a name="zh-cn_topic_0000001173164707_p1635875105417"></a>路径结束时的y坐标值。</p>
1168    </td>
1169    </tr>
1170    </tbody>
1171    </table>
1172
1173-   返回值
1174
1175    无
1176
1177-   示例
1178
1179    ```
1180    ctx.beginPath();
1181    ctx.moveTo(20, 20);
1182    ctx.quadraticCurveTo(100, 100, 200, 20);
1183    ctx.stroke();
1184    ```
1185
1186    ![](figures/zh-cn_image_0000001212081551.png)
1187
1188
1189## arc\(\)<a name="zh-cn_topic_0000001173164707_section102329511716"></a>
1190
1191绘制弧线路径。
1192
1193-   参数
1194
1195    <a name="zh-cn_topic_0000001173164707_table1924242125518"></a>
1196    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1127315218557"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p227311285518"><a name="zh-cn_topic_0000001173164707_p227311285518"></a><a name="zh-cn_topic_0000001173164707_p227311285518"></a>参数</p>
1197    </th>
1198    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p162737213553"><a name="zh-cn_topic_0000001173164707_p162737213553"></a><a name="zh-cn_topic_0000001173164707_p162737213553"></a>类型</p>
1199    </th>
1200    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p11273123553"><a name="zh-cn_topic_0000001173164707_p11273123553"></a><a name="zh-cn_topic_0000001173164707_p11273123553"></a>描述</p>
1201    </th>
1202    </tr>
1203    </thead>
1204    <tbody><tr id="zh-cn_topic_0000001173164707_row1527314215554"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p82737245518"><a name="zh-cn_topic_0000001173164707_p82737245518"></a><a name="zh-cn_topic_0000001173164707_p82737245518"></a>x</p>
1205    </td>
1206    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p92733211553"><a name="zh-cn_topic_0000001173164707_p92733211553"></a><a name="zh-cn_topic_0000001173164707_p92733211553"></a>number</p>
1207    </td>
1208    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p5273423558"><a name="zh-cn_topic_0000001173164707_p5273423558"></a><a name="zh-cn_topic_0000001173164707_p5273423558"></a>弧线圆心的x坐标值。</p>
1209    </td>
1210    </tr>
1211    <tr id="zh-cn_topic_0000001173164707_row132733255519"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1527352175511"><a name="zh-cn_topic_0000001173164707_p1527352175511"></a><a name="zh-cn_topic_0000001173164707_p1527352175511"></a>y</p>
1212    </td>
1213    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p192731220550"><a name="zh-cn_topic_0000001173164707_p192731220550"></a><a name="zh-cn_topic_0000001173164707_p192731220550"></a>number</p>
1214    </td>
1215    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p527320245513"><a name="zh-cn_topic_0000001173164707_p527320245513"></a><a name="zh-cn_topic_0000001173164707_p527320245513"></a>弧线圆心的y坐标值。</p>
1216    </td>
1217    </tr>
1218    <tr id="zh-cn_topic_0000001173164707_row82734214551"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p42737218552"><a name="zh-cn_topic_0000001173164707_p42737218552"></a><a name="zh-cn_topic_0000001173164707_p42737218552"></a>radius</p>
1219    </td>
1220    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1827312295511"><a name="zh-cn_topic_0000001173164707_p1827312295511"></a><a name="zh-cn_topic_0000001173164707_p1827312295511"></a>number</p>
1221    </td>
1222    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1827315217559"><a name="zh-cn_topic_0000001173164707_p1827315217559"></a><a name="zh-cn_topic_0000001173164707_p1827315217559"></a>弧线的圆半径。</p>
1223    </td>
1224    </tr>
1225    <tr id="zh-cn_topic_0000001173164707_row132731724552"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1727310213555"><a name="zh-cn_topic_0000001173164707_p1727310213555"></a><a name="zh-cn_topic_0000001173164707_p1727310213555"></a>startAngle</p>
1226    </td>
1227    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p112731628552"><a name="zh-cn_topic_0000001173164707_p112731628552"></a><a name="zh-cn_topic_0000001173164707_p112731628552"></a>number</p>
1228    </td>
1229    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p13273132135514"><a name="zh-cn_topic_0000001173164707_p13273132135514"></a><a name="zh-cn_topic_0000001173164707_p13273132135514"></a>弧线的起始弧度。</p>
1230    </td>
1231    </tr>
1232    <tr id="zh-cn_topic_0000001173164707_row4273728559"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p122730214554"><a name="zh-cn_topic_0000001173164707_p122730214554"></a><a name="zh-cn_topic_0000001173164707_p122730214554"></a>endAngle</p>
1233    </td>
1234    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p162747217557"><a name="zh-cn_topic_0000001173164707_p162747217557"></a><a name="zh-cn_topic_0000001173164707_p162747217557"></a>number</p>
1235    </td>
1236    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1274112145513"><a name="zh-cn_topic_0000001173164707_p1274112145513"></a><a name="zh-cn_topic_0000001173164707_p1274112145513"></a>弧线的终止弧度。</p>
1237    </td>
1238    </tr>
1239    <tr id="zh-cn_topic_0000001173164707_row1227416285512"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p92747265520"><a name="zh-cn_topic_0000001173164707_p92747265520"></a><a name="zh-cn_topic_0000001173164707_p92747265520"></a>anticlockwise</p>
1240    </td>
1241    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p327410216554"><a name="zh-cn_topic_0000001173164707_p327410216554"></a><a name="zh-cn_topic_0000001173164707_p327410216554"></a>boolean</p>
1242    </td>
1243    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p102742026555"><a name="zh-cn_topic_0000001173164707_p102742026555"></a><a name="zh-cn_topic_0000001173164707_p102742026555"></a>是否逆时针绘制圆弧。</p>
1244    </td>
1245    </tr>
1246    </tbody>
1247    </table>
1248
1249-   返回值
1250
1251    无
1252
1253-   示例
1254
1255    ```
1256    ctx.beginPath();
1257    ctx.arc(100, 75, 50, 0, 6.28);
1258    ctx.stroke();
1259    ```
1260
1261    ![](figures/zh-cn_image_0000001166760184.png)
1262
1263
1264## arcTo\(\)<a name="zh-cn_topic_0000001173164707_section3172156571"></a>
1265
1266依据圆弧经过的点和圆弧半径创建圆弧路径。
1267
1268-   参数
1269
1270    <a name="zh-cn_topic_0000001173164707_table1320614135617"></a>
1271    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1423481125614"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p723412110565"><a name="zh-cn_topic_0000001173164707_p723412110565"></a><a name="zh-cn_topic_0000001173164707_p723412110565"></a>参数</p>
1272    </th>
1273    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p123411135619"><a name="zh-cn_topic_0000001173164707_p123411135619"></a><a name="zh-cn_topic_0000001173164707_p123411135619"></a>类型</p>
1274    </th>
1275    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p82341216569"><a name="zh-cn_topic_0000001173164707_p82341216569"></a><a name="zh-cn_topic_0000001173164707_p82341216569"></a>描述</p>
1276    </th>
1277    </tr>
1278    </thead>
1279    <tbody><tr id="zh-cn_topic_0000001173164707_row523414155610"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1423461105617"><a name="zh-cn_topic_0000001173164707_p1423461105617"></a><a name="zh-cn_topic_0000001173164707_p1423461105617"></a>x1</p>
1280    </td>
1281    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p12347118565"><a name="zh-cn_topic_0000001173164707_p12347118565"></a><a name="zh-cn_topic_0000001173164707_p12347118565"></a>number</p>
1282    </td>
1283    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p18234618568"><a name="zh-cn_topic_0000001173164707_p18234618568"></a><a name="zh-cn_topic_0000001173164707_p18234618568"></a>圆弧经过的第一个点的x坐标值。</p>
1284    </td>
1285    </tr>
1286    <tr id="zh-cn_topic_0000001173164707_row15234515560"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p0234131195618"><a name="zh-cn_topic_0000001173164707_p0234131195618"></a><a name="zh-cn_topic_0000001173164707_p0234131195618"></a>y1</p>
1287    </td>
1288    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1223418112569"><a name="zh-cn_topic_0000001173164707_p1223418112569"></a><a name="zh-cn_topic_0000001173164707_p1223418112569"></a>number</p>
1289    </td>
1290    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p2023411135618"><a name="zh-cn_topic_0000001173164707_p2023411135618"></a><a name="zh-cn_topic_0000001173164707_p2023411135618"></a>圆弧经过的第一个点的y坐标值。</p>
1291    </td>
1292    </tr>
1293    <tr id="zh-cn_topic_0000001173164707_row823411114560"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1123513125614"><a name="zh-cn_topic_0000001173164707_p1123513125614"></a><a name="zh-cn_topic_0000001173164707_p1123513125614"></a>x2</p>
1294    </td>
1295    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p112351415564"><a name="zh-cn_topic_0000001173164707_p112351415564"></a><a name="zh-cn_topic_0000001173164707_p112351415564"></a>number</p>
1296    </td>
1297    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1923513165616"><a name="zh-cn_topic_0000001173164707_p1923513165616"></a><a name="zh-cn_topic_0000001173164707_p1923513165616"></a>圆弧经过的第二个点的x坐标值。</p>
1298    </td>
1299    </tr>
1300    <tr id="zh-cn_topic_0000001173164707_row1923518155616"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1623511155613"><a name="zh-cn_topic_0000001173164707_p1623511155613"></a><a name="zh-cn_topic_0000001173164707_p1623511155613"></a>y2</p>
1301    </td>
1302    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p13235113569"><a name="zh-cn_topic_0000001173164707_p13235113569"></a><a name="zh-cn_topic_0000001173164707_p13235113569"></a>number</p>
1303    </td>
1304    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p32351913568"><a name="zh-cn_topic_0000001173164707_p32351913568"></a><a name="zh-cn_topic_0000001173164707_p32351913568"></a>圆弧经过的第二个点的y坐标值。</p>
1305    </td>
1306    </tr>
1307    <tr id="zh-cn_topic_0000001173164707_row122350195613"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p32354116565"><a name="zh-cn_topic_0000001173164707_p32354116565"></a><a name="zh-cn_topic_0000001173164707_p32354116565"></a>radius</p>
1308    </td>
1309    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p623561195612"><a name="zh-cn_topic_0000001173164707_p623561195612"></a><a name="zh-cn_topic_0000001173164707_p623561195612"></a>number</p>
1310    </td>
1311    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p42356185615"><a name="zh-cn_topic_0000001173164707_p42356185615"></a><a name="zh-cn_topic_0000001173164707_p42356185615"></a>圆弧的圆半径值。</p>
1312    </td>
1313    </tr>
1314    </tbody>
1315    </table>
1316
1317-   返回值
1318
1319    无
1320
1321-   示例
1322
1323    ```
1324    ctx.moveTo(100, 20);
1325    ctx.arcTo(150, 20, 150, 70, 50); // Create an arc
1326    ctx.stroke();
1327    ```
1328
1329    ![](figures/zh-cn_image_0000001166920132.png)
1330
1331
1332## ellipse\(\)<sup>6+</sup><a name="zh-cn_topic_0000001173164707_section918313239192"></a>
1333
1334在规定的矩形区域绘制一个椭圆。
1335
1336-   参数
1337
1338    <a name="zh-cn_topic_0000001173164707_table1918352314192"></a>
1339    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row4184523111911"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p418492351918"><a name="zh-cn_topic_0000001173164707_p418492351918"></a><a name="zh-cn_topic_0000001173164707_p418492351918"></a>参数</p>
1340    </th>
1341    <th class="cellrowborder" valign="top" width="31.34343434343434%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p17184172391915"><a name="zh-cn_topic_0000001173164707_p17184172391915"></a><a name="zh-cn_topic_0000001173164707_p17184172391915"></a>类型</p>
1342    </th>
1343    <th class="cellrowborder" valign="top" width="35.323232323232325%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p11184523161913"><a name="zh-cn_topic_0000001173164707_p11184523161913"></a><a name="zh-cn_topic_0000001173164707_p11184523161913"></a>描述</p>
1344    </th>
1345    </tr>
1346    </thead>
1347    <tbody><tr id="zh-cn_topic_0000001173164707_row71841423161917"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1018414236191"><a name="zh-cn_topic_0000001173164707_p1018414236191"></a><a name="zh-cn_topic_0000001173164707_p1018414236191"></a>x</p>
1348    </td>
1349    <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p2184723201917"><a name="zh-cn_topic_0000001173164707_p2184723201917"></a><a name="zh-cn_topic_0000001173164707_p2184723201917"></a>number</p>
1350    </td>
1351    <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p01841723151917"><a name="zh-cn_topic_0000001173164707_p01841723151917"></a><a name="zh-cn_topic_0000001173164707_p01841723151917"></a>椭圆圆心的x轴坐标。</p>
1352    </td>
1353    </tr>
1354    <tr id="zh-cn_topic_0000001173164707_row171846239199"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p6185122311911"><a name="zh-cn_topic_0000001173164707_p6185122311911"></a><a name="zh-cn_topic_0000001173164707_p6185122311911"></a>y</p>
1355    </td>
1356    <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1818582316192"><a name="zh-cn_topic_0000001173164707_p1818582316192"></a><a name="zh-cn_topic_0000001173164707_p1818582316192"></a>number</p>
1357    </td>
1358    <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1353402619228"><a name="zh-cn_topic_0000001173164707_p1353402619228"></a><a name="zh-cn_topic_0000001173164707_p1353402619228"></a>椭圆圆心的y轴坐标。</p>
1359    </td>
1360    </tr>
1361    <tr id="zh-cn_topic_0000001173164707_row151221733163013"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1112243316308"><a name="zh-cn_topic_0000001173164707_p1112243316308"></a><a name="zh-cn_topic_0000001173164707_p1112243316308"></a>radiusX</p>
1362    </td>
1363    <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p141221133193020"><a name="zh-cn_topic_0000001173164707_p141221133193020"></a><a name="zh-cn_topic_0000001173164707_p141221133193020"></a>number</p>
1364    </td>
1365    <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p056816461311"><a name="zh-cn_topic_0000001173164707_p056816461311"></a><a name="zh-cn_topic_0000001173164707_p056816461311"></a>椭圆x轴的半径长度。</p>
1366    </td>
1367    </tr>
1368    <tr id="zh-cn_topic_0000001173164707_row1660574219308"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p126058426309"><a name="zh-cn_topic_0000001173164707_p126058426309"></a><a name="zh-cn_topic_0000001173164707_p126058426309"></a>radiusY</p>
1369    </td>
1370    <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p6605742183011"><a name="zh-cn_topic_0000001173164707_p6605742183011"></a><a name="zh-cn_topic_0000001173164707_p6605742183011"></a>number</p>
1371    </td>
1372    <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p31691408321"><a name="zh-cn_topic_0000001173164707_p31691408321"></a><a name="zh-cn_topic_0000001173164707_p31691408321"></a>椭圆y轴的半径长度。</p>
1373    </td>
1374    </tr>
1375    <tr id="zh-cn_topic_0000001173164707_row2849135183011"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1984915356302"><a name="zh-cn_topic_0000001173164707_p1984915356302"></a><a name="zh-cn_topic_0000001173164707_p1984915356302"></a>rotation</p>
1376    </td>
1377    <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p11849193510302"><a name="zh-cn_topic_0000001173164707_p11849193510302"></a><a name="zh-cn_topic_0000001173164707_p11849193510302"></a>number</p>
1378    </td>
1379    <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p5849103517308"><a name="zh-cn_topic_0000001173164707_p5849103517308"></a><a name="zh-cn_topic_0000001173164707_p5849103517308"></a>椭圆的旋转角度，单位为弧度。</p>
1380    </td>
1381    </tr>
1382    <tr id="zh-cn_topic_0000001173164707_row3789194613307"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1278934610303"><a name="zh-cn_topic_0000001173164707_p1278934610303"></a><a name="zh-cn_topic_0000001173164707_p1278934610303"></a>startAngle</p>
1383    </td>
1384    <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p19789164643015"><a name="zh-cn_topic_0000001173164707_p19789164643015"></a><a name="zh-cn_topic_0000001173164707_p19789164643015"></a>number</p>
1385    </td>
1386    <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1588673153311"><a name="zh-cn_topic_0000001173164707_p1588673153311"></a><a name="zh-cn_topic_0000001173164707_p1588673153311"></a>椭圆绘制的起始点角度，以弧度表示。</p>
1387    </td>
1388    </tr>
1389    <tr id="zh-cn_topic_0000001173164707_row181851723131918"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p20439192711202"><a name="zh-cn_topic_0000001173164707_p20439192711202"></a><a name="zh-cn_topic_0000001173164707_p20439192711202"></a>endAngle</p>
1390    </td>
1391    <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1118512314194"><a name="zh-cn_topic_0000001173164707_p1118512314194"></a><a name="zh-cn_topic_0000001173164707_p1118512314194"></a>number</p>
1392    </td>
1393    <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p101851623151913"><a name="zh-cn_topic_0000001173164707_p101851623151913"></a><a name="zh-cn_topic_0000001173164707_p101851623151913"></a>椭圆绘制的结束点角度，以弧度表示。</p>
1394    </td>
1395    </tr>
1396    <tr id="zh-cn_topic_0000001173164707_row3185172371917"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p161851423121917"><a name="zh-cn_topic_0000001173164707_p161851423121917"></a><a name="zh-cn_topic_0000001173164707_p161851423121917"></a>anticlockwise</p>
1397    </td>
1398    <td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1518512311915"><a name="zh-cn_topic_0000001173164707_p1518512311915"></a><a name="zh-cn_topic_0000001173164707_p1518512311915"></a>number</p>
1399    </td>
1400    <td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p11857237193"><a name="zh-cn_topic_0000001173164707_p11857237193"></a><a name="zh-cn_topic_0000001173164707_p11857237193"></a>是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)</p>
1401    </td>
1402    </tr>
1403    </tbody>
1404    </table>
1405
1406-   返回值
1407
1408    无
1409
1410-   示例
1411
1412    ```
1413    ctx.beginPath();
1414    ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
1415    ctx.stroke();
1416    ```
1417
1418    ![](figures/ellipse.png)
1419
1420
1421## rect\(\)<a name="zh-cn_topic_0000001173164707_section1351519304107"></a>
1422
1423创建矩形路径。
1424
1425-   参数
1426
1427    <a name="zh-cn_topic_0000001173164707_table92131548185610"></a>
1428    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row9238348185613"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p723854810561"><a name="zh-cn_topic_0000001173164707_p723854810561"></a><a name="zh-cn_topic_0000001173164707_p723854810561"></a>参数</p>
1429    </th>
1430    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p2238144885615"><a name="zh-cn_topic_0000001173164707_p2238144885615"></a><a name="zh-cn_topic_0000001173164707_p2238144885615"></a>类型</p>
1431    </th>
1432    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p223814486561"><a name="zh-cn_topic_0000001173164707_p223814486561"></a><a name="zh-cn_topic_0000001173164707_p223814486561"></a>描述</p>
1433    </th>
1434    </tr>
1435    </thead>
1436    <tbody><tr id="zh-cn_topic_0000001173164707_row5238104813569"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1423864816566"><a name="zh-cn_topic_0000001173164707_p1423864816566"></a><a name="zh-cn_topic_0000001173164707_p1423864816566"></a>x</p>
1437    </td>
1438    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p3238194814560"><a name="zh-cn_topic_0000001173164707_p3238194814560"></a><a name="zh-cn_topic_0000001173164707_p3238194814560"></a>number</p>
1439    </td>
1440    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p9238204818566"><a name="zh-cn_topic_0000001173164707_p9238204818566"></a><a name="zh-cn_topic_0000001173164707_p9238204818566"></a>指定矩形的左上角x坐标值。</p>
1441    </td>
1442    </tr>
1443    <tr id="zh-cn_topic_0000001173164707_row1423884816562"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p132383488563"><a name="zh-cn_topic_0000001173164707_p132383488563"></a><a name="zh-cn_topic_0000001173164707_p132383488563"></a>y</p>
1444    </td>
1445    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p02395487560"><a name="zh-cn_topic_0000001173164707_p02395487560"></a><a name="zh-cn_topic_0000001173164707_p02395487560"></a>number</p>
1446    </td>
1447    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p523934819568"><a name="zh-cn_topic_0000001173164707_p523934819568"></a><a name="zh-cn_topic_0000001173164707_p523934819568"></a>指定矩形的左上角y坐标值。</p>
1448    </td>
1449    </tr>
1450    <tr id="zh-cn_topic_0000001173164707_row723954815563"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p182391481565"><a name="zh-cn_topic_0000001173164707_p182391481565"></a><a name="zh-cn_topic_0000001173164707_p182391481565"></a>width</p>
1451    </td>
1452    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p142391648145610"><a name="zh-cn_topic_0000001173164707_p142391648145610"></a><a name="zh-cn_topic_0000001173164707_p142391648145610"></a>number</p>
1453    </td>
1454    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p523919486569"><a name="zh-cn_topic_0000001173164707_p523919486569"></a><a name="zh-cn_topic_0000001173164707_p523919486569"></a>指定矩形的宽度。</p>
1455    </td>
1456    </tr>
1457    <tr id="zh-cn_topic_0000001173164707_row1723924885618"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1923934820561"><a name="zh-cn_topic_0000001173164707_p1923934820561"></a><a name="zh-cn_topic_0000001173164707_p1923934820561"></a>height</p>
1458    </td>
1459    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p13239448135615"><a name="zh-cn_topic_0000001173164707_p13239448135615"></a><a name="zh-cn_topic_0000001173164707_p13239448135615"></a>number</p>
1460    </td>
1461    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p523924819568"><a name="zh-cn_topic_0000001173164707_p523924819568"></a><a name="zh-cn_topic_0000001173164707_p523924819568"></a>指定矩形的高度。</p>
1462    </td>
1463    </tr>
1464    </tbody>
1465    </table>
1466
1467-   返回值
1468
1469    无
1470
1471-   示例
1472
1473    ```
1474    ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
1475    ctx.stroke(); // Draw it
1476    ```
1477
1478    ![](figures/zh-cn_image_0000001212440091.png)
1479
1480
1481## fill\(\)<a name="zh-cn_topic_0000001173164707_section14842031151015"></a>
1482
1483对封闭路径进行填充。
1484
1485-   参数
1486
1487    无
1488
1489-   返回值
1490
1491    无
1492
1493-   示例
1494
1495    ```
1496    ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
1497    ctx.fill(); // Draw it in default setting
1498    ```
1499
1500    ![](figures/zh-cn_image_0000001166441664.png)
1501
1502
1503## clip\(\)<a name="zh-cn_topic_0000001173164707_section1355171921416"></a>
1504
1505设置当前路径为剪切路径。
1506
1507-   参数
1508
1509    无
1510
1511-   返回值
1512
1513    无
1514
1515-   示例
1516
1517    ```
1518    ctx.rect(0, 0, 200, 200);
1519    ctx.stroke();
1520    ctx.clip();
1521    // Draw red rectangle after clip
1522    ctx.fillStyle = "rgb(255,0,0)";
1523    ctx.fillRect(0, 0, 150, 150);
1524    ```
1525
1526    ![](figures/zh-cn_image_0000001166601634.png)
1527
1528
1529## rotate\(\)<a name="zh-cn_topic_0000001173164707_section7682182091419"></a>
1530
1531针对当前坐标轴进行顺时针旋转。
1532
1533-   参数
1534
1535    <a name="zh-cn_topic_0000001173164707_table1670853610595"></a>
1536    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row572823665918"><th class="cellrowborder" valign="top" width="17.22172217221722%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p57281836155917"><a name="zh-cn_topic_0000001173164707_p57281836155917"></a><a name="zh-cn_topic_0000001173164707_p57281836155917"></a>参数</p>
1537    </th>
1538    <th class="cellrowborder" valign="top" width="15.5015501550155%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p207281636145914"><a name="zh-cn_topic_0000001173164707_p207281636145914"></a><a name="zh-cn_topic_0000001173164707_p207281636145914"></a>类型</p>
1539    </th>
1540    <th class="cellrowborder" valign="top" width="67.27672767276727%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p1472873645916"><a name="zh-cn_topic_0000001173164707_p1472873645916"></a><a name="zh-cn_topic_0000001173164707_p1472873645916"></a>描述</p>
1541    </th>
1542    </tr>
1543    </thead>
1544    <tbody><tr id="zh-cn_topic_0000001173164707_row272813675911"><td class="cellrowborder" valign="top" width="17.22172217221722%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p7728113655914"><a name="zh-cn_topic_0000001173164707_p7728113655914"></a><a name="zh-cn_topic_0000001173164707_p7728113655914"></a>rotate</p>
1545    </td>
1546    <td class="cellrowborder" valign="top" width="15.5015501550155%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1372863618596"><a name="zh-cn_topic_0000001173164707_p1372863618596"></a><a name="zh-cn_topic_0000001173164707_p1372863618596"></a>number</p>
1547    </td>
1548    <td class="cellrowborder" valign="top" width="67.27672767276727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p47285363596"><a name="zh-cn_topic_0000001173164707_p47285363596"></a><a name="zh-cn_topic_0000001173164707_p47285363596"></a>设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。</p>
1549    </td>
1550    </tr>
1551    </tbody>
1552    </table>
1553
1554-   返回值
1555
1556    无
1557
1558-   示例
1559
1560    ```
1561    ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees
1562    ctx.fillRect(70, 20, 50, 50);
1563    ```
1564
1565    ![](figures/zh-cn_image_0000001212161515.png)
1566
1567
1568## scale\(\)<a name="zh-cn_topic_0000001173164707_section157714218144"></a>
1569
1570设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
1571
1572-   参数
1573
1574    <a name="zh-cn_topic_0000001173164707_table23481973415"></a>
1575    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row9366771547"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p43665716410"><a name="zh-cn_topic_0000001173164707_p43665716410"></a><a name="zh-cn_topic_0000001173164707_p43665716410"></a>参数</p>
1576    </th>
1577    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p173667718418"><a name="zh-cn_topic_0000001173164707_p173667718418"></a><a name="zh-cn_topic_0000001173164707_p173667718418"></a>类型</p>
1578    </th>
1579    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p183661172419"><a name="zh-cn_topic_0000001173164707_p183661172419"></a><a name="zh-cn_topic_0000001173164707_p183661172419"></a>描述</p>
1580    </th>
1581    </tr>
1582    </thead>
1583    <tbody><tr id="zh-cn_topic_0000001173164707_row33666717414"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p113661711419"><a name="zh-cn_topic_0000001173164707_p113661711419"></a><a name="zh-cn_topic_0000001173164707_p113661711419"></a>x</p>
1584    </td>
1585    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p33671879413"><a name="zh-cn_topic_0000001173164707_p33671879413"></a><a name="zh-cn_topic_0000001173164707_p33671879413"></a>number</p>
1586    </td>
1587    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p5367870415"><a name="zh-cn_topic_0000001173164707_p5367870415"></a><a name="zh-cn_topic_0000001173164707_p5367870415"></a>设置水平方向的缩放值。</p>
1588    </td>
1589    </tr>
1590    <tr id="zh-cn_topic_0000001173164707_row13367271645"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1836717943"><a name="zh-cn_topic_0000001173164707_p1836717943"></a><a name="zh-cn_topic_0000001173164707_p1836717943"></a>y</p>
1591    </td>
1592    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p33671371347"><a name="zh-cn_topic_0000001173164707_p33671371347"></a><a name="zh-cn_topic_0000001173164707_p33671371347"></a>number</p>
1593    </td>
1594    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p203671878419"><a name="zh-cn_topic_0000001173164707_p203671878419"></a><a name="zh-cn_topic_0000001173164707_p203671878419"></a>设置垂直方向的缩放值。</p>
1595    </td>
1596    </tr>
1597    </tbody>
1598    </table>
1599
1600-   返回值
1601
1602    无
1603
1604-   示例
1605
1606    ```
1607    ctx.strokeRect(10, 10, 25, 25);
1608    ctx.scale(2, 2);// Scale to 200%
1609    ctx.strokeRect(10, 10, 25, 25);
1610    ```
1611
1612    ![](figures/zh-cn_image_0000001212081553.png)
1613
1614
1615## transform\(\)<a name="zh-cn_topic_0000001173164707_section1675964717570"></a>
1616
1617transform\(\)方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
1618
1619>![](../../public_sys-resources/icon-note.gif) **说明：**
1620>变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
1621>-   x' = scaleX \* x + skewY \* y + translateX
1622>-   y' = skewX \* x + scaleY \* y + translateY
1623
1624-   参数
1625
1626    <a name="zh-cn_topic_0000001173164707_table2760124718578"></a>
1627    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row676054716572"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p47602476571"><a name="zh-cn_topic_0000001173164707_p47602476571"></a><a name="zh-cn_topic_0000001173164707_p47602476571"></a>参数</p>
1628    </th>
1629    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p5760164710579"><a name="zh-cn_topic_0000001173164707_p5760164710579"></a><a name="zh-cn_topic_0000001173164707_p5760164710579"></a>类型</p>
1630    </th>
1631    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p97601147105711"><a name="zh-cn_topic_0000001173164707_p97601147105711"></a><a name="zh-cn_topic_0000001173164707_p97601147105711"></a>描述</p>
1632    </th>
1633    </tr>
1634    </thead>
1635    <tbody><tr id="zh-cn_topic_0000001173164707_row57601477578"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p197611471576"><a name="zh-cn_topic_0000001173164707_p197611471576"></a><a name="zh-cn_topic_0000001173164707_p197611471576"></a>scaleX</p>
1636    </td>
1637    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1576144725710"><a name="zh-cn_topic_0000001173164707_p1576144725710"></a><a name="zh-cn_topic_0000001173164707_p1576144725710"></a>number</p>
1638    </td>
1639    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p17761647135713"><a name="zh-cn_topic_0000001173164707_p17761647135713"></a><a name="zh-cn_topic_0000001173164707_p17761647135713"></a>指定水平缩放值。</p>
1640    </td>
1641    </tr>
1642    <tr id="zh-cn_topic_0000001173164707_row976184735711"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1761947175714"><a name="zh-cn_topic_0000001173164707_p1761947175714"></a><a name="zh-cn_topic_0000001173164707_p1761947175714"></a>skewX</p>
1643    </td>
1644    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p177611647125715"><a name="zh-cn_topic_0000001173164707_p177611647125715"></a><a name="zh-cn_topic_0000001173164707_p177611647125715"></a>number</p>
1645    </td>
1646    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p876244725717"><a name="zh-cn_topic_0000001173164707_p876244725717"></a><a name="zh-cn_topic_0000001173164707_p876244725717"></a>指定水平倾斜值。</p>
1647    </td>
1648    </tr>
1649    <tr id="zh-cn_topic_0000001173164707_row5762847175716"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1776215478578"><a name="zh-cn_topic_0000001173164707_p1776215478578"></a><a name="zh-cn_topic_0000001173164707_p1776215478578"></a>skewY</p>
1650    </td>
1651    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p2762154745716"><a name="zh-cn_topic_0000001173164707_p2762154745716"></a><a name="zh-cn_topic_0000001173164707_p2762154745716"></a>number</p>
1652    </td>
1653    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p13762164795712"><a name="zh-cn_topic_0000001173164707_p13762164795712"></a><a name="zh-cn_topic_0000001173164707_p13762164795712"></a>指定垂直倾斜值。</p>
1654    </td>
1655    </tr>
1656    <tr id="zh-cn_topic_0000001173164707_row876284716577"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1076254775718"><a name="zh-cn_topic_0000001173164707_p1076254775718"></a><a name="zh-cn_topic_0000001173164707_p1076254775718"></a>scaleY</p>
1657    </td>
1658    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p276210474575"><a name="zh-cn_topic_0000001173164707_p276210474575"></a><a name="zh-cn_topic_0000001173164707_p276210474575"></a>number</p>
1659    </td>
1660    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p776234716577"><a name="zh-cn_topic_0000001173164707_p776234716577"></a><a name="zh-cn_topic_0000001173164707_p776234716577"></a>指定垂直缩放值。</p>
1661    </td>
1662    </tr>
1663    <tr id="zh-cn_topic_0000001173164707_row07621847165720"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p6762154795717"><a name="zh-cn_topic_0000001173164707_p6762154795717"></a><a name="zh-cn_topic_0000001173164707_p6762154795717"></a>translateX</p>
1664    </td>
1665    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p376234720578"><a name="zh-cn_topic_0000001173164707_p376234720578"></a><a name="zh-cn_topic_0000001173164707_p376234720578"></a>number</p>
1666    </td>
1667    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p3763114705715"><a name="zh-cn_topic_0000001173164707_p3763114705715"></a><a name="zh-cn_topic_0000001173164707_p3763114705715"></a>指定水平移动值。</p>
1668    </td>
1669    </tr>
1670    <tr id="zh-cn_topic_0000001173164707_row8763104718572"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p97631647185712"><a name="zh-cn_topic_0000001173164707_p97631647185712"></a><a name="zh-cn_topic_0000001173164707_p97631647185712"></a>translateY</p>
1671    </td>
1672    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p18763194716579"><a name="zh-cn_topic_0000001173164707_p18763194716579"></a><a name="zh-cn_topic_0000001173164707_p18763194716579"></a>number</p>
1673    </td>
1674    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p15763847155713"><a name="zh-cn_topic_0000001173164707_p15763847155713"></a><a name="zh-cn_topic_0000001173164707_p15763847155713"></a>指定垂直移动值。</p>
1675    </td>
1676    </tr>
1677    </tbody>
1678    </table>
1679
1680-   返回值
1681
1682    无
1683
1684-   示例
1685
1686    ```
1687    ctx.fillStyle = 'rgb(0,0,0)';
1688    ctx.fillRect(0, 0, 100, 100)
1689    ctx.transform(1, 0.5, -0.5, 1, 10, 10);
1690    ctx.fillStyle = 'rgb(255,0,0)';
1691    ctx.fillRect(0, 0, 100, 100);
1692    ctx.transform(1, 0.5, -0.5, 1, 10, 10);
1693    ctx.fillStyle = 'rgb(0,0,255)';
1694    ctx.fillRect(0, 0, 100, 100);
1695    ```
1696
1697    ![](figures/zh-cn_image_0000001166760188.png)
1698
1699
1700## setTransform\(\)<a name="zh-cn_topic_0000001173164707_section1439382216440"></a>
1701
1702setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。
1703
1704-   参数
1705
1706    <a name="zh-cn_topic_0000001173164707_table13369145118412"></a>
1707    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row133954517420"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1039545113413"><a name="zh-cn_topic_0000001173164707_p1039545113413"></a><a name="zh-cn_topic_0000001173164707_p1039545113413"></a>参数</p>
1708    </th>
1709    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1439516511649"><a name="zh-cn_topic_0000001173164707_p1439516511649"></a><a name="zh-cn_topic_0000001173164707_p1439516511649"></a>类型</p>
1710    </th>
1711    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p1639517511547"><a name="zh-cn_topic_0000001173164707_p1639517511547"></a><a name="zh-cn_topic_0000001173164707_p1639517511547"></a>描述</p>
1712    </th>
1713    </tr>
1714    </thead>
1715    <tbody><tr id="zh-cn_topic_0000001173164707_row339510515415"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p43951951246"><a name="zh-cn_topic_0000001173164707_p43951951246"></a><a name="zh-cn_topic_0000001173164707_p43951951246"></a>scaleX</p>
1716    </td>
1717    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p93952511042"><a name="zh-cn_topic_0000001173164707_p93952511042"></a><a name="zh-cn_topic_0000001173164707_p93952511042"></a>number</p>
1718    </td>
1719    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p17552452132316"><a name="zh-cn_topic_0000001173164707_p17552452132316"></a><a name="zh-cn_topic_0000001173164707_p17552452132316"></a>指定水平缩放值。</p>
1720    </td>
1721    </tr>
1722    <tr id="zh-cn_topic_0000001173164707_row63951511948"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p63957511243"><a name="zh-cn_topic_0000001173164707_p63957511243"></a><a name="zh-cn_topic_0000001173164707_p63957511243"></a>skewX</p>
1723    </td>
1724    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p93959515413"><a name="zh-cn_topic_0000001173164707_p93959515413"></a><a name="zh-cn_topic_0000001173164707_p93959515413"></a>number</p>
1725    </td>
1726    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p855205232313"><a name="zh-cn_topic_0000001173164707_p855205232313"></a><a name="zh-cn_topic_0000001173164707_p855205232313"></a>指定水平倾斜值。</p>
1727    </td>
1728    </tr>
1729    <tr id="zh-cn_topic_0000001173164707_row16395351149"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p12395751249"><a name="zh-cn_topic_0000001173164707_p12395751249"></a><a name="zh-cn_topic_0000001173164707_p12395751249"></a>skewY</p>
1730    </td>
1731    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p20396165115411"><a name="zh-cn_topic_0000001173164707_p20396165115411"></a><a name="zh-cn_topic_0000001173164707_p20396165115411"></a>number</p>
1732    </td>
1733    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p3552852152318"><a name="zh-cn_topic_0000001173164707_p3552852152318"></a><a name="zh-cn_topic_0000001173164707_p3552852152318"></a>指定垂直倾斜值。</p>
1734    </td>
1735    </tr>
1736    <tr id="zh-cn_topic_0000001173164707_row0396125117417"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p8396145114418"><a name="zh-cn_topic_0000001173164707_p8396145114418"></a><a name="zh-cn_topic_0000001173164707_p8396145114418"></a>scaleY</p>
1737    </td>
1738    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1239605116410"><a name="zh-cn_topic_0000001173164707_p1239605116410"></a><a name="zh-cn_topic_0000001173164707_p1239605116410"></a>number</p>
1739    </td>
1740    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p6552205292319"><a name="zh-cn_topic_0000001173164707_p6552205292319"></a><a name="zh-cn_topic_0000001173164707_p6552205292319"></a>指定垂直缩放值。</p>
1741    </td>
1742    </tr>
1743    <tr id="zh-cn_topic_0000001173164707_row71371555047"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p51681035892"><a name="zh-cn_topic_0000001173164707_p51681035892"></a><a name="zh-cn_topic_0000001173164707_p51681035892"></a>translateX</p>
1744    </td>
1745    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p816815351895"><a name="zh-cn_topic_0000001173164707_p816815351895"></a><a name="zh-cn_topic_0000001173164707_p816815351895"></a>number</p>
1746    </td>
1747    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p16552135220230"><a name="zh-cn_topic_0000001173164707_p16552135220230"></a><a name="zh-cn_topic_0000001173164707_p16552135220230"></a>指定水平移动值。</p>
1748    </td>
1749    </tr>
1750    <tr id="zh-cn_topic_0000001173164707_row23751855744"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1216810351597"><a name="zh-cn_topic_0000001173164707_p1216810351597"></a><a name="zh-cn_topic_0000001173164707_p1216810351597"></a>translateY</p>
1751    </td>
1752    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1916813355910"><a name="zh-cn_topic_0000001173164707_p1916813355910"></a><a name="zh-cn_topic_0000001173164707_p1916813355910"></a>number</p>
1753    </td>
1754    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p15553352102320"><a name="zh-cn_topic_0000001173164707_p15553352102320"></a><a name="zh-cn_topic_0000001173164707_p15553352102320"></a>指定垂直移动值。</p>
1755    </td>
1756    </tr>
1757    </tbody>
1758    </table>
1759
1760-   返回值
1761
1762    无
1763
1764-   示例
1765
1766    ```
1767    ctx.fillStyle = 'rgb(255,0,0)';
1768    ctx.fillRect(0, 0, 100, 100)
1769    ctx.setTransform(1,0.5, -0.5, 1, 10, 10);
1770    ctx.fillStyle = 'rgb(0,0,255)';
1771    ctx.fillRect(0, 0, 100, 100);
1772    ```
1773
1774    ![](figures/zh-cn_image_0000001166920134.png)
1775
1776
1777## translate\(\)<a name="zh-cn_topic_0000001173164707_section931011253449"></a>
1778
1779移动当前坐标系的原点。
1780
1781-   参数
1782
1783    <a name="zh-cn_topic_0000001173164707_table256392291115"></a>
1784    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row5585122161117"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1458552217113"><a name="zh-cn_topic_0000001173164707_p1458552217113"></a><a name="zh-cn_topic_0000001173164707_p1458552217113"></a>参数</p>
1785    </th>
1786    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p17585112213118"><a name="zh-cn_topic_0000001173164707_p17585112213118"></a><a name="zh-cn_topic_0000001173164707_p17585112213118"></a>类型</p>
1787    </th>
1788    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p758592281116"><a name="zh-cn_topic_0000001173164707_p758592281116"></a><a name="zh-cn_topic_0000001173164707_p758592281116"></a>描述</p>
1789    </th>
1790    </tr>
1791    </thead>
1792    <tbody><tr id="zh-cn_topic_0000001173164707_row358510226116"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p4585162231115"><a name="zh-cn_topic_0000001173164707_p4585162231115"></a><a name="zh-cn_topic_0000001173164707_p4585162231115"></a>x</p>
1793    </td>
1794    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p13585152221111"><a name="zh-cn_topic_0000001173164707_p13585152221111"></a><a name="zh-cn_topic_0000001173164707_p13585152221111"></a>number</p>
1795    </td>
1796    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p11585102251118"><a name="zh-cn_topic_0000001173164707_p11585102251118"></a><a name="zh-cn_topic_0000001173164707_p11585102251118"></a>设置水平平移量。</p>
1797    </td>
1798    </tr>
1799    <tr id="zh-cn_topic_0000001173164707_row205858225118"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1058532211120"><a name="zh-cn_topic_0000001173164707_p1058532211120"></a><a name="zh-cn_topic_0000001173164707_p1058532211120"></a>y</p>
1800    </td>
1801    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1858582281116"><a name="zh-cn_topic_0000001173164707_p1858582281116"></a><a name="zh-cn_topic_0000001173164707_p1858582281116"></a>number</p>
1802    </td>
1803    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1058572221115"><a name="zh-cn_topic_0000001173164707_p1058572221115"></a><a name="zh-cn_topic_0000001173164707_p1058572221115"></a>设置竖直平移量。</p>
1804    </td>
1805    </tr>
1806    </tbody>
1807    </table>
1808
1809-   返回值
1810
1811    无
1812
1813-   示例
1814
1815    ```
1816    ctx.fillRect(10, 10, 50, 50);
1817    ctx.translate(70, 70);
1818    ctx.fillRect(10, 10, 50, 50);
1819    ```
1820
1821    ![](figures/zh-cn_image_0000001212320087.png)
1822
1823
1824## createPath2D\(\)<sup>6+</sup><a name="zh-cn_topic_0000001173164707_section6654994314"></a>
1825
1826创建一个Path2D对象。
1827
1828-   参数
1829
1830    <a name="zh-cn_topic_0000001173164707_table1358920321431"></a>
1831    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row105901132194317"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p17590932124319"><a name="zh-cn_topic_0000001173164707_p17590932124319"></a><a name="zh-cn_topic_0000001173164707_p17590932124319"></a>参数</p>
1832    </th>
1833    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p859017328430"><a name="zh-cn_topic_0000001173164707_p859017328430"></a><a name="zh-cn_topic_0000001173164707_p859017328430"></a>类型</p>
1834    </th>
1835    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p259063217431"><a name="zh-cn_topic_0000001173164707_p259063217431"></a><a name="zh-cn_topic_0000001173164707_p259063217431"></a>描述</p>
1836    </th>
1837    </tr>
1838    </thead>
1839    <tbody><tr id="zh-cn_topic_0000001173164707_row25906327439"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p459013326436"><a name="zh-cn_topic_0000001173164707_p459013326436"></a><a name="zh-cn_topic_0000001173164707_p459013326436"></a>path</p>
1840    </td>
1841    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p5590153284315"><a name="zh-cn_topic_0000001173164707_p5590153284315"></a><a name="zh-cn_topic_0000001173164707_p5590153284315"></a>Path2D</p>
1842    </td>
1843    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1059012327435"><a name="zh-cn_topic_0000001173164707_p1059012327435"></a><a name="zh-cn_topic_0000001173164707_p1059012327435"></a>Path2D对象。</p>
1844    </td>
1845    </tr>
1846    <tr id="zh-cn_topic_0000001173164707_row359083216435"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p3590173219438"><a name="zh-cn_topic_0000001173164707_p3590173219438"></a><a name="zh-cn_topic_0000001173164707_p3590173219438"></a>cmds</p>
1847    </td>
1848    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1659143214317"><a name="zh-cn_topic_0000001173164707_p1659143214317"></a><a name="zh-cn_topic_0000001173164707_p1659143214317"></a>string</p>
1849    </td>
1850    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p125911432154314"><a name="zh-cn_topic_0000001173164707_p125911432154314"></a><a name="zh-cn_topic_0000001173164707_p125911432154314"></a>SVG的Path描述字符串。</p>
1851    </td>
1852    </tr>
1853    </tbody>
1854    </table>
1855
1856-   返回值
1857
1858    Path2D对象
1859
1860-   示例
1861
1862    ```
1863    var path1 = ctx.createPath2D();
1864    path1.moveTo(100, 100);
1865    path1.lineTo(200, 100);
1866    path1.lineTo(100, 200);
1867    path1.closePath();
1868    ctx.stroke(path1);
1869    var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z");
1870    ctx.stroke(path2);
1871    var path3 = ctx.createPath2D(path2);
1872    ctx.stroke(path3);
1873    ```
1874
1875    ![](figures/zh-cn_image_0000001212440093.png)
1876
1877
1878## globalAlpha<a name="zh-cn_topic_0000001173164707_section188252174810"></a>
1879
1880设置透明度。
1881
1882-   参数
1883
1884    <a name="zh-cn_topic_0000001173164707_table93426123121"></a>
1885    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row123641312141218"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p15364121218129"><a name="zh-cn_topic_0000001173164707_p15364121218129"></a><a name="zh-cn_topic_0000001173164707_p15364121218129"></a>参数</p>
1886    </th>
1887    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1136401214122"><a name="zh-cn_topic_0000001173164707_p1136401214122"></a><a name="zh-cn_topic_0000001173164707_p1136401214122"></a>类型</p>
1888    </th>
1889    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p19364121291215"><a name="zh-cn_topic_0000001173164707_p19364121291215"></a><a name="zh-cn_topic_0000001173164707_p19364121291215"></a>描述</p>
1890    </th>
1891    </tr>
1892    </thead>
1893    <tbody><tr id="zh-cn_topic_0000001173164707_row236412121129"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p43641512121219"><a name="zh-cn_topic_0000001173164707_p43641512121219"></a><a name="zh-cn_topic_0000001173164707_p43641512121219"></a>value</p>
1894    </td>
1895    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p236416122128"><a name="zh-cn_topic_0000001173164707_p236416122128"></a><a name="zh-cn_topic_0000001173164707_p236416122128"></a>number</p>
1896    </td>
1897    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1254548152511"><a name="zh-cn_topic_0000001173164707_p1254548152511"></a><a name="zh-cn_topic_0000001173164707_p1254548152511"></a>0.0为完全透明，1.0为完全不透明。</p>
1898    </td>
1899    </tr>
1900    </tbody>
1901    </table>
1902
1903-   返回值
1904
1905    无
1906
1907-   示例
1908
1909    ```
1910    ctx.fillStyle = 'rgb(255,0,0)';
1911    ctx.fillRect(0, 0, 50, 50);
1912    ctx.globalAlpha = 0.4;
1913    ctx.fillStyle = 'rgb(0,0,255)';
1914    ctx.fillRect(50, 50, 50, 50);
1915    ```
1916
1917    ![](figures/zh-cn_image_0000001166441666.png)
1918
1919
1920## drawImage\(\)<a name="zh-cn_topic_0000001173164707_section1953117410488"></a>
1921
1922进行图像绘制。
1923
1924-   参数
1925
1926    <a name="zh-cn_topic_0000001173164707_table32431032122019"></a>
1927    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row32931532152016"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p12931532192013"><a name="zh-cn_topic_0000001173164707_p12931532192013"></a><a name="zh-cn_topic_0000001173164707_p12931532192013"></a>参数</p>
1928    </th>
1929    <th class="cellrowborder" valign="top" width="18.858585858585858%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p18293153216204"><a name="zh-cn_topic_0000001173164707_p18293153216204"></a><a name="zh-cn_topic_0000001173164707_p18293153216204"></a>类型</p>
1930    </th>
1931    <th class="cellrowborder" valign="top" width="47.80808080808081%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p1529333214208"><a name="zh-cn_topic_0000001173164707_p1529333214208"></a><a name="zh-cn_topic_0000001173164707_p1529333214208"></a>描述</p>
1932    </th>
1933    </tr>
1934    </thead>
1935    <tbody><tr id="zh-cn_topic_0000001173164707_row14293732192019"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p32933328202"><a name="zh-cn_topic_0000001173164707_p32933328202"></a><a name="zh-cn_topic_0000001173164707_p32933328202"></a>image</p>
1936    </td>
1937    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p14293163232017"><a name="zh-cn_topic_0000001173164707_p14293163232017"></a><a name="zh-cn_topic_0000001173164707_p14293163232017"></a>Image</p>
1938    </td>
1939    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p8293193262017"><a name="zh-cn_topic_0000001173164707_p8293193262017"></a><a name="zh-cn_topic_0000001173164707_p8293193262017"></a>图片资源，请参考<a href="js-components-canvas-image.md">Image对象</a>。</p>
1940    </td>
1941    </tr>
1942    <tr id="zh-cn_topic_0000001173164707_row3301829154419"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p183191137184416"><a name="zh-cn_topic_0000001173164707_p183191137184416"></a><a name="zh-cn_topic_0000001173164707_p183191137184416"></a>sx</p>
1943    </td>
1944    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p16319103734413"><a name="zh-cn_topic_0000001173164707_p16319103734413"></a><a name="zh-cn_topic_0000001173164707_p16319103734413"></a>number</p>
1945    </td>
1946    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p123191537154414"><a name="zh-cn_topic_0000001173164707_p123191537154414"></a><a name="zh-cn_topic_0000001173164707_p123191537154414"></a>裁切源图像时距离源图像左上角的x坐标值。</p>
1947    </td>
1948    </tr>
1949    <tr id="zh-cn_topic_0000001173164707_row12670183194416"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p173195371449"><a name="zh-cn_topic_0000001173164707_p173195371449"></a><a name="zh-cn_topic_0000001173164707_p173195371449"></a>sy</p>
1950    </td>
1951    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p7319337144420"><a name="zh-cn_topic_0000001173164707_p7319337144420"></a><a name="zh-cn_topic_0000001173164707_p7319337144420"></a>number</p>
1952    </td>
1953    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p11320537124417"><a name="zh-cn_topic_0000001173164707_p11320537124417"></a><a name="zh-cn_topic_0000001173164707_p11320537124417"></a>裁切源图像时距离源图像左上角的y坐标值。</p>
1954    </td>
1955    </tr>
1956    <tr id="zh-cn_topic_0000001173164707_row106131433144418"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p18320037144416"><a name="zh-cn_topic_0000001173164707_p18320037144416"></a><a name="zh-cn_topic_0000001173164707_p18320037144416"></a>sWidth</p>
1957    </td>
1958    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p232016373443"><a name="zh-cn_topic_0000001173164707_p232016373443"></a><a name="zh-cn_topic_0000001173164707_p232016373443"></a>number</p>
1959    </td>
1960    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p2320173713449"><a name="zh-cn_topic_0000001173164707_p2320173713449"></a><a name="zh-cn_topic_0000001173164707_p2320173713449"></a>裁切源图像时需要裁切的宽度。</p>
1961    </td>
1962    </tr>
1963    <tr id="zh-cn_topic_0000001173164707_row9578335104413"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p63201037144415"><a name="zh-cn_topic_0000001173164707_p63201037144415"></a><a name="zh-cn_topic_0000001173164707_p63201037144415"></a>sHeight</p>
1964    </td>
1965    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1032043713440"><a name="zh-cn_topic_0000001173164707_p1032043713440"></a><a name="zh-cn_topic_0000001173164707_p1032043713440"></a>number</p>
1966    </td>
1967    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p143201937174418"><a name="zh-cn_topic_0000001173164707_p143201937174418"></a><a name="zh-cn_topic_0000001173164707_p143201937174418"></a>裁切源图像时需要裁切的高度。</p>
1968    </td>
1969    </tr>
1970    <tr id="zh-cn_topic_0000001173164707_row82931325201"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p142931032122010"><a name="zh-cn_topic_0000001173164707_p142931032122010"></a><a name="zh-cn_topic_0000001173164707_p142931032122010"></a>dx</p>
1971    </td>
1972    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p7293123218208"><a name="zh-cn_topic_0000001173164707_p7293123218208"></a><a name="zh-cn_topic_0000001173164707_p7293123218208"></a>number</p>
1973    </td>
1974    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p329363211208"><a name="zh-cn_topic_0000001173164707_p329363211208"></a><a name="zh-cn_topic_0000001173164707_p329363211208"></a>绘制区域左上角在x轴的位置。</p>
1975    </td>
1976    </tr>
1977    <tr id="zh-cn_topic_0000001173164707_row1829323292013"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p112931232152014"><a name="zh-cn_topic_0000001173164707_p112931232152014"></a><a name="zh-cn_topic_0000001173164707_p112931232152014"></a>dy</p>
1978    </td>
1979    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1829393215206"><a name="zh-cn_topic_0000001173164707_p1829393215206"></a><a name="zh-cn_topic_0000001173164707_p1829393215206"></a>number</p>
1980    </td>
1981    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p20293183219208"><a name="zh-cn_topic_0000001173164707_p20293183219208"></a><a name="zh-cn_topic_0000001173164707_p20293183219208"></a>绘制区域左上角在y 轴的位置。</p>
1982    </td>
1983    </tr>
1984    <tr id="zh-cn_topic_0000001173164707_row1929303232015"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p12931632122013"><a name="zh-cn_topic_0000001173164707_p12931632122013"></a><a name="zh-cn_topic_0000001173164707_p12931632122013"></a>dWidth</p>
1985    </td>
1986    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p18293132102011"><a name="zh-cn_topic_0000001173164707_p18293132102011"></a><a name="zh-cn_topic_0000001173164707_p18293132102011"></a>number</p>
1987    </td>
1988    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p62937321203"><a name="zh-cn_topic_0000001173164707_p62937321203"></a><a name="zh-cn_topic_0000001173164707_p62937321203"></a>绘制区域的宽度。</p>
1989    </td>
1990    </tr>
1991    <tr id="zh-cn_topic_0000001173164707_row15293163262011"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p029315329203"><a name="zh-cn_topic_0000001173164707_p029315329203"></a><a name="zh-cn_topic_0000001173164707_p029315329203"></a>dHeight</p>
1992    </td>
1993    <td class="cellrowborder" valign="top" width="18.858585858585858%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p72931432192011"><a name="zh-cn_topic_0000001173164707_p72931432192011"></a><a name="zh-cn_topic_0000001173164707_p72931432192011"></a>number</p>
1994    </td>
1995    <td class="cellrowborder" valign="top" width="47.80808080808081%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p2029363215202"><a name="zh-cn_topic_0000001173164707_p2029363215202"></a><a name="zh-cn_topic_0000001173164707_p2029363215202"></a>绘制区域的高度。</p>
1996    </td>
1997    </tr>
1998    </tbody>
1999    </table>
2000
2001-   返回值
2002
2003    无
2004
2005-   示例
2006
2007    ```
2008    var test = this.$element('drawImage');
2009    var ctx = test.getContext('2d');
2010    var img = new Image();
2011    img.src = 'common/image/test.jpg';
2012    ctx.drawImage(img, 50, 80, 80, 80);
2013    ```
2014
2015    ![](figures/zh-cn_image_0000001166601636.png)
2016
2017
2018## restore\(\)<a name="zh-cn_topic_0000001173164707_section64027684817"></a>
2019
2020对保存的绘图上下文进行恢复。
2021
2022-   参数
2023
2024    无
2025
2026-   返回值
2027
2028    无
2029
2030-   示例
2031
2032    ```
2033    ctx.restore();
2034    ```
2035
2036
2037## save\(\)<a name="zh-cn_topic_0000001173164707_section410672635214"></a>
2038
2039对当前的绘图上下文进行保存。
2040
2041-   参数
2042
2043    无
2044
2045-   返回值
2046
2047    无
2048
2049-   示例
2050
2051    ```
2052    ctx.save();
2053    ```
2054
2055
2056## createLinearGradient\(\)<sup>6+</sup><a name="zh-cn_topic_0000001173164707_section1696310905"></a>
2057
2058创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](js-components-canvas-canvasgradient.md)。
2059
2060-   参数
2061
2062    <a name="zh-cn_topic_0000001173164707_table1796312016012"></a>
2063    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1096414014011"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1596430101"><a name="zh-cn_topic_0000001173164707_p1596430101"></a><a name="zh-cn_topic_0000001173164707_p1596430101"></a>参数</p>
2064    </th>
2065    <th class="cellrowborder" valign="top" width="32.39393939393939%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p296410702"><a name="zh-cn_topic_0000001173164707_p296410702"></a><a name="zh-cn_topic_0000001173164707_p296410702"></a>类型</p>
2066    </th>
2067    <th class="cellrowborder" valign="top" width="34.27272727272727%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p1596412017016"><a name="zh-cn_topic_0000001173164707_p1596412017016"></a><a name="zh-cn_topic_0000001173164707_p1596412017016"></a>描述</p>
2068    </th>
2069    </tr>
2070    </thead>
2071    <tbody><tr id="zh-cn_topic_0000001173164707_row69641801501"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p59641405011"><a name="zh-cn_topic_0000001173164707_p59641405011"></a><a name="zh-cn_topic_0000001173164707_p59641405011"></a>x0</p>
2072    </td>
2073    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p7964602011"><a name="zh-cn_topic_0000001173164707_p7964602011"></a><a name="zh-cn_topic_0000001173164707_p7964602011"></a>number</p>
2074    </td>
2075    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p139648012011"><a name="zh-cn_topic_0000001173164707_p139648012011"></a><a name="zh-cn_topic_0000001173164707_p139648012011"></a>起点的x轴坐标。</p>
2076    </td>
2077    </tr>
2078    <tr id="zh-cn_topic_0000001173164707_row13964130401"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p09641909020"><a name="zh-cn_topic_0000001173164707_p09641909020"></a><a name="zh-cn_topic_0000001173164707_p09641909020"></a>y0</p>
2079    </td>
2080    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p18965001203"><a name="zh-cn_topic_0000001173164707_p18965001203"></a><a name="zh-cn_topic_0000001173164707_p18965001203"></a>number</p>
2081    </td>
2082    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p19653020019"><a name="zh-cn_topic_0000001173164707_p19653020019"></a><a name="zh-cn_topic_0000001173164707_p19653020019"></a>起点的y轴坐标。</p>
2083    </td>
2084    </tr>
2085    <tr id="zh-cn_topic_0000001173164707_row19965104011"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p29653012013"><a name="zh-cn_topic_0000001173164707_p29653012013"></a><a name="zh-cn_topic_0000001173164707_p29653012013"></a>x1</p>
2086    </td>
2087    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p49653018012"><a name="zh-cn_topic_0000001173164707_p49653018012"></a><a name="zh-cn_topic_0000001173164707_p49653018012"></a>number</p>
2088    </td>
2089    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p19965704015"><a name="zh-cn_topic_0000001173164707_p19965704015"></a><a name="zh-cn_topic_0000001173164707_p19965704015"></a>终点的x轴坐标。</p>
2090    </td>
2091    </tr>
2092    <tr id="zh-cn_topic_0000001173164707_row139652017014"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p496690407"><a name="zh-cn_topic_0000001173164707_p496690407"></a><a name="zh-cn_topic_0000001173164707_p496690407"></a>y1</p>
2093    </td>
2094    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1296650207"><a name="zh-cn_topic_0000001173164707_p1296650207"></a><a name="zh-cn_topic_0000001173164707_p1296650207"></a>number</p>
2095    </td>
2096    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p69661401507"><a name="zh-cn_topic_0000001173164707_p69661401507"></a><a name="zh-cn_topic_0000001173164707_p69661401507"></a>终点的y轴坐标。</p>
2097    </td>
2098    </tr>
2099    </tbody>
2100    </table>
2101
2102-   返回值
2103
2104    <a name="zh-cn_topic_0000001173164707_table15966200609"></a>
2105    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row29668020014"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001173164707_p1696712015020"><a name="zh-cn_topic_0000001173164707_p1696712015020"></a><a name="zh-cn_topic_0000001173164707_p1696712015020"></a>类型</p>
2106    </th>
2107    <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001173164707_p19671901603"><a name="zh-cn_topic_0000001173164707_p19671901603"></a><a name="zh-cn_topic_0000001173164707_p19671901603"></a>说明</p>
2108    </th>
2109    </tr>
2110    </thead>
2111    <tbody><tr id="zh-cn_topic_0000001173164707_row89671800010"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p2967308018"><a name="zh-cn_topic_0000001173164707_p2967308018"></a><a name="zh-cn_topic_0000001173164707_p2967308018"></a>Object</p>
2112    </td>
2113    <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p1967801012"><a name="zh-cn_topic_0000001173164707_p1967801012"></a><a name="zh-cn_topic_0000001173164707_p1967801012"></a>返回创建的CanvasGradient对象。</p>
2114    </td>
2115    </tr>
2116    </tbody>
2117    </table>
2118
2119-   示例
2120
2121    ```
2122    <!-- xxx.hml -->
2123    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
2124    <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
2125    ```
2126
2127    ```
2128    // xxx.js
2129    export default {
2130      handleClick() {
2131        const el = this.$refs.canvas;
2132        const ctx = el.getContext('2d');
2133        // Linear gradient: start(50,0) end(300,100)
2134        var gradient = ctx.createLinearGradient(50,0, 300,100);
2135        // Add three color stops
2136        gradient.addColorStop(0.0, 'red');
2137        gradient.addColorStop(0.5, 'white');
2138        gradient.addColorStop(1.0, 'green');
2139        // Set the fill style and draw a rectangle
2140        ctx.fillStyle = gradient;
2141        ctx.fillRect(0, 0, 500, 500);
2142      }
2143    }
2144    ```
2145
2146    ![](figures/zh-cn_image_0000001212161517.png)
2147
2148
2149## createRadialGradient\(\)<sup>6+</sup><a name="zh-cn_topic_0000001173164707_section121861417143711"></a>
2150
2151创建一个径向渐变色，返回CanvasGradient对象，请参考CanvasGradient
2152
2153-   参数
2154
2155    <a name="zh-cn_topic_0000001173164707_table618713176372"></a>
2156    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row41871717143716"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p01871817143717"><a name="zh-cn_topic_0000001173164707_p01871817143717"></a><a name="zh-cn_topic_0000001173164707_p01871817143717"></a>参数</p>
2157    </th>
2158    <th class="cellrowborder" valign="top" width="32.39393939393939%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p171871617123712"><a name="zh-cn_topic_0000001173164707_p171871617123712"></a><a name="zh-cn_topic_0000001173164707_p171871617123712"></a>类型</p>
2159    </th>
2160    <th class="cellrowborder" valign="top" width="34.27272727272727%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p518781723714"><a name="zh-cn_topic_0000001173164707_p518781723714"></a><a name="zh-cn_topic_0000001173164707_p518781723714"></a>描述</p>
2161    </th>
2162    </tr>
2163    </thead>
2164    <tbody><tr id="zh-cn_topic_0000001173164707_row1618751723711"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p9187191793711"><a name="zh-cn_topic_0000001173164707_p9187191793711"></a><a name="zh-cn_topic_0000001173164707_p9187191793711"></a>x0</p>
2165    </td>
2166    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p218871714374"><a name="zh-cn_topic_0000001173164707_p218871714374"></a><a name="zh-cn_topic_0000001173164707_p218871714374"></a>number</p>
2167    </td>
2168    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p71886176371"><a name="zh-cn_topic_0000001173164707_p71886176371"></a><a name="zh-cn_topic_0000001173164707_p71886176371"></a>起始圆的x轴坐标。</p>
2169    </td>
2170    </tr>
2171    <tr id="zh-cn_topic_0000001173164707_row12188117173710"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p15188141793710"><a name="zh-cn_topic_0000001173164707_p15188141793710"></a><a name="zh-cn_topic_0000001173164707_p15188141793710"></a>y0</p>
2172    </td>
2173    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p91889174371"><a name="zh-cn_topic_0000001173164707_p91889174371"></a><a name="zh-cn_topic_0000001173164707_p91889174371"></a>number</p>
2174    </td>
2175    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p8188417183712"><a name="zh-cn_topic_0000001173164707_p8188417183712"></a><a name="zh-cn_topic_0000001173164707_p8188417183712"></a>起始圆的y轴坐标。</p>
2176    </td>
2177    </tr>
2178    <tr id="zh-cn_topic_0000001173164707_row618881793711"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p9188217143711"><a name="zh-cn_topic_0000001173164707_p9188217143711"></a><a name="zh-cn_topic_0000001173164707_p9188217143711"></a>r0</p>
2179    </td>
2180    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p418811175377"><a name="zh-cn_topic_0000001173164707_p418811175377"></a><a name="zh-cn_topic_0000001173164707_p418811175377"></a>number</p>
2181    </td>
2182    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p81887176371"><a name="zh-cn_topic_0000001173164707_p81887176371"></a><a name="zh-cn_topic_0000001173164707_p81887176371"></a>起始圆的半径。必须是非负且有限的。</p>
2183    </td>
2184    </tr>
2185    <tr id="zh-cn_topic_0000001173164707_row9504115563915"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p5504205583914"><a name="zh-cn_topic_0000001173164707_p5504205583914"></a><a name="zh-cn_topic_0000001173164707_p5504205583914"></a>x1</p>
2186    </td>
2187    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p2505155512392"><a name="zh-cn_topic_0000001173164707_p2505155512392"></a><a name="zh-cn_topic_0000001173164707_p2505155512392"></a>number</p>
2188    </td>
2189    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p11505355123913"><a name="zh-cn_topic_0000001173164707_p11505355123913"></a><a name="zh-cn_topic_0000001173164707_p11505355123913"></a>终点圆的x轴坐标。</p>
2190    </td>
2191    </tr>
2192    <tr id="zh-cn_topic_0000001173164707_row9799138204017"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p625322234019"><a name="zh-cn_topic_0000001173164707_p625322234019"></a><a name="zh-cn_topic_0000001173164707_p625322234019"></a>y1</p>
2193    </td>
2194    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1799158174015"><a name="zh-cn_topic_0000001173164707_p1799158174015"></a><a name="zh-cn_topic_0000001173164707_p1799158174015"></a>number</p>
2195    </td>
2196    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1879910812408"><a name="zh-cn_topic_0000001173164707_p1879910812408"></a><a name="zh-cn_topic_0000001173164707_p1879910812408"></a>终点圆的y轴坐标。</p>
2197    </td>
2198    </tr>
2199    <tr id="zh-cn_topic_0000001173164707_row16617135918397"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p995672413403"><a name="zh-cn_topic_0000001173164707_p995672413403"></a><a name="zh-cn_topic_0000001173164707_p995672413403"></a>r1</p>
2200    </td>
2201    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1561785983914"><a name="zh-cn_topic_0000001173164707_p1561785983914"></a><a name="zh-cn_topic_0000001173164707_p1561785983914"></a>number</p>
2202    </td>
2203    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p76171459163916"><a name="zh-cn_topic_0000001173164707_p76171459163916"></a><a name="zh-cn_topic_0000001173164707_p76171459163916"></a>终点圆的半径。必须为非负且有限的。</p>
2204    </td>
2205    </tr>
2206    </tbody>
2207    </table>
2208
2209-   返回值
2210
2211    <a name="zh-cn_topic_0000001173164707_table14189717203712"></a>
2212    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row171899172372"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001173164707_p518914177378"><a name="zh-cn_topic_0000001173164707_p518914177378"></a><a name="zh-cn_topic_0000001173164707_p518914177378"></a>类型</p>
2213    </th>
2214    <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001173164707_p5189417143715"><a name="zh-cn_topic_0000001173164707_p5189417143715"></a><a name="zh-cn_topic_0000001173164707_p5189417143715"></a>说明</p>
2215    </th>
2216    </tr>
2217    </thead>
2218    <tbody><tr id="zh-cn_topic_0000001173164707_row1518961763716"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p1318991713712"><a name="zh-cn_topic_0000001173164707_p1318991713712"></a><a name="zh-cn_topic_0000001173164707_p1318991713712"></a>Object</p>
2219    </td>
2220    <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p1818911174376"><a name="zh-cn_topic_0000001173164707_p1818911174376"></a><a name="zh-cn_topic_0000001173164707_p1818911174376"></a>返回创建的CanvasGradient对象。</p>
2221    </td>
2222    </tr>
2223    </tbody>
2224    </table>
2225
2226-   示例
2227
2228    ```
2229    <!-- xxx.hml -->
2230    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
2231    <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
2232    ```
2233
2234    ```
2235    // xxx.js
2236    export default {
2237      handleClick() {
2238        const el = this.$refs.canvas;
2239        const ctx = el.getContext('2d');
2240        // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200)
2241        var gradient = ctx.createRadialGradient(200,200,50, 200,200,200);
2242        // Add three color stops
2243        gradient.addColorStop(0.0, 'red');
2244        gradient.addColorStop(0.5, 'white');
2245        gradient.addColorStop(1.0, 'green');
2246        // Set the fill style and draw a rectangle
2247        ctx.fillStyle = gradient;
2248        ctx.fillRect(0, 0, 500, 500);
2249      }
2250    }
2251    ```
2252
2253    ![](figures/zh-cn_image_0000001212081555.png)
2254
2255
2256## createImageData\(\)<a name="zh-cn_topic_0000001173164707_section2021142714524"></a>
2257
2258创建新的ImageData 对象，请参考[ImageData对象](js-components-canvas-imagedata.md)。
2259
2260-   参数
2261
2262    <a name="zh-cn_topic_0000001173164707_table129117962316"></a>
2263    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row19361699239"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1293615917238"><a name="zh-cn_topic_0000001173164707_p1293615917238"></a><a name="zh-cn_topic_0000001173164707_p1293615917238"></a>参数</p>
2264    </th>
2265    <th class="cellrowborder" valign="top" width="32.39393939393939%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1693612912237"><a name="zh-cn_topic_0000001173164707_p1693612912237"></a><a name="zh-cn_topic_0000001173164707_p1693612912237"></a>类型</p>
2266    </th>
2267    <th class="cellrowborder" valign="top" width="34.27272727272727%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p13936189122313"><a name="zh-cn_topic_0000001173164707_p13936189122313"></a><a name="zh-cn_topic_0000001173164707_p13936189122313"></a>描述</p>
2268    </th>
2269    </tr>
2270    </thead>
2271    <tbody><tr id="zh-cn_topic_0000001173164707_row59364982313"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p19364919234"><a name="zh-cn_topic_0000001173164707_p19364919234"></a><a name="zh-cn_topic_0000001173164707_p19364919234"></a>width</p>
2272    </td>
2273    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p69368972314"><a name="zh-cn_topic_0000001173164707_p69368972314"></a><a name="zh-cn_topic_0000001173164707_p69368972314"></a>number</p>
2274    </td>
2275    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p10936179162310"><a name="zh-cn_topic_0000001173164707_p10936179162310"></a><a name="zh-cn_topic_0000001173164707_p10936179162310"></a>ImageData的宽度。</p>
2276    </td>
2277    </tr>
2278    <tr id="zh-cn_topic_0000001173164707_row593620917239"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p129361199237"><a name="zh-cn_topic_0000001173164707_p129361199237"></a><a name="zh-cn_topic_0000001173164707_p129361199237"></a>height</p>
2279    </td>
2280    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p793613982319"><a name="zh-cn_topic_0000001173164707_p793613982319"></a><a name="zh-cn_topic_0000001173164707_p793613982319"></a>number</p>
2281    </td>
2282    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p139365917231"><a name="zh-cn_topic_0000001173164707_p139365917231"></a><a name="zh-cn_topic_0000001173164707_p139365917231"></a>ImageData的高度。</p>
2283    </td>
2284    </tr>
2285    <tr id="zh-cn_topic_0000001173164707_row109361902317"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1093620932310"><a name="zh-cn_topic_0000001173164707_p1093620932310"></a><a name="zh-cn_topic_0000001173164707_p1093620932310"></a>imagedata</p>
2286    </td>
2287    <td class="cellrowborder" valign="top" width="32.39393939393939%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p119372911232"><a name="zh-cn_topic_0000001173164707_p119372911232"></a><a name="zh-cn_topic_0000001173164707_p119372911232"></a>Object</p>
2288    </td>
2289    <td class="cellrowborder" valign="top" width="34.27272727272727%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p109371902312"><a name="zh-cn_topic_0000001173164707_p109371902312"></a><a name="zh-cn_topic_0000001173164707_p109371902312"></a>复制现有的ImageData对象。</p>
2290    </td>
2291    </tr>
2292    </tbody>
2293    </table>
2294
2295-   返回值
2296
2297    <a name="zh-cn_topic_0000001173164707_table17718181510238"></a>
2298    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row17736101592319"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001173164707_p7736415102313"><a name="zh-cn_topic_0000001173164707_p7736415102313"></a><a name="zh-cn_topic_0000001173164707_p7736415102313"></a>类型</p>
2299    </th>
2300    <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001173164707_p1873610154234"><a name="zh-cn_topic_0000001173164707_p1873610154234"></a><a name="zh-cn_topic_0000001173164707_p1873610154234"></a>说明</p>
2301    </th>
2302    </tr>
2303    </thead>
2304    <tbody><tr id="zh-cn_topic_0000001173164707_row1673601532316"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p10736191518237"><a name="zh-cn_topic_0000001173164707_p10736191518237"></a><a name="zh-cn_topic_0000001173164707_p10736191518237"></a>Object</p>
2305    </td>
2306    <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p7736315122311"><a name="zh-cn_topic_0000001173164707_p7736315122311"></a><a name="zh-cn_topic_0000001173164707_p7736315122311"></a>返回创建的ImageData对象。</p>
2307    </td>
2308    </tr>
2309    </tbody>
2310    </table>
2311
2312-   示例
2313
2314    ```
2315    imageData = ctx.createImageData(50, 100);  // Create ImageData with 50px width and 100px height
2316    newImageData = ctx.createImageData(imageData);  // Create ImageData using the input imageData
2317    ```
2318
2319
2320## getImageData\(\)<a name="zh-cn_topic_0000001173164707_section92731528205217"></a>
2321
2322以当前canvas指定区域内的像素创建ImageData对象。
2323
2324-   参数
2325
2326    <a name="zh-cn_topic_0000001173164707_table290615162313"></a>
2327    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row18931185132316"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p189319518233"><a name="zh-cn_topic_0000001173164707_p189319518233"></a><a name="zh-cn_topic_0000001173164707_p189319518233"></a>参数</p>
2328    </th>
2329    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p99311751122319"><a name="zh-cn_topic_0000001173164707_p99311751122319"></a><a name="zh-cn_topic_0000001173164707_p99311751122319"></a>类型</p>
2330    </th>
2331    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p59312514236"><a name="zh-cn_topic_0000001173164707_p59312514236"></a><a name="zh-cn_topic_0000001173164707_p59312514236"></a>描述</p>
2332    </th>
2333    </tr>
2334    </thead>
2335    <tbody><tr id="zh-cn_topic_0000001173164707_row5931175152317"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1393165162311"><a name="zh-cn_topic_0000001173164707_p1393165162311"></a><a name="zh-cn_topic_0000001173164707_p1393165162311"></a>sx</p>
2336    </td>
2337    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1193118517235"><a name="zh-cn_topic_0000001173164707_p1193118517235"></a><a name="zh-cn_topic_0000001173164707_p1193118517235"></a>number</p>
2338    </td>
2339    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p9931195122316"><a name="zh-cn_topic_0000001173164707_p9931195122316"></a><a name="zh-cn_topic_0000001173164707_p9931195122316"></a>需要输出的区域的左上角x坐标。</p>
2340    </td>
2341    </tr>
2342    <tr id="zh-cn_topic_0000001173164707_row119316511234"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p12931155142311"><a name="zh-cn_topic_0000001173164707_p12931155142311"></a><a name="zh-cn_topic_0000001173164707_p12931155142311"></a>sy</p>
2343    </td>
2344    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p10931145112232"><a name="zh-cn_topic_0000001173164707_p10931145112232"></a><a name="zh-cn_topic_0000001173164707_p10931145112232"></a>number</p>
2345    </td>
2346    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1393125112230"><a name="zh-cn_topic_0000001173164707_p1393125112230"></a><a name="zh-cn_topic_0000001173164707_p1393125112230"></a>需要输出的区域的左上角y坐标。</p>
2347    </td>
2348    </tr>
2349    <tr id="zh-cn_topic_0000001173164707_row11931951142315"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p59311051112311"><a name="zh-cn_topic_0000001173164707_p59311051112311"></a><a name="zh-cn_topic_0000001173164707_p59311051112311"></a>sw</p>
2350    </td>
2351    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p12931351162314"><a name="zh-cn_topic_0000001173164707_p12931351162314"></a><a name="zh-cn_topic_0000001173164707_p12931351162314"></a>number</p>
2352    </td>
2353    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p16932165172315"><a name="zh-cn_topic_0000001173164707_p16932165172315"></a><a name="zh-cn_topic_0000001173164707_p16932165172315"></a>需要输出的区域的宽度。</p>
2354    </td>
2355    </tr>
2356    <tr id="zh-cn_topic_0000001173164707_row593215132316"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p199321451132315"><a name="zh-cn_topic_0000001173164707_p199321451132315"></a><a name="zh-cn_topic_0000001173164707_p199321451132315"></a>sh</p>
2357    </td>
2358    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p89321851182311"><a name="zh-cn_topic_0000001173164707_p89321851182311"></a><a name="zh-cn_topic_0000001173164707_p89321851182311"></a>number</p>
2359    </td>
2360    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p10932105102314"><a name="zh-cn_topic_0000001173164707_p10932105102314"></a><a name="zh-cn_topic_0000001173164707_p10932105102314"></a>需要输出的区域的高度。</p>
2361    </td>
2362    </tr>
2363    </tbody>
2364    </table>
2365
2366-   返回值
2367
2368    <a name="zh-cn_topic_0000001173164707_table062115912238"></a>
2369    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1264005902317"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001173164707_p0640195910233"><a name="zh-cn_topic_0000001173164707_p0640195910233"></a><a name="zh-cn_topic_0000001173164707_p0640195910233"></a>类型</p>
2370    </th>
2371    <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001173164707_p4640155922319"><a name="zh-cn_topic_0000001173164707_p4640155922319"></a><a name="zh-cn_topic_0000001173164707_p4640155922319"></a>说明</p>
2372    </th>
2373    </tr>
2374    </thead>
2375    <tbody><tr id="zh-cn_topic_0000001173164707_row15640359162318"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p964035912238"><a name="zh-cn_topic_0000001173164707_p964035912238"></a><a name="zh-cn_topic_0000001173164707_p964035912238"></a>Object</p>
2376    </td>
2377    <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p464055982312"><a name="zh-cn_topic_0000001173164707_p464055982312"></a><a name="zh-cn_topic_0000001173164707_p464055982312"></a>返回包含指定区域像素的ImageData对象。</p>
2378    </td>
2379    </tr>
2380    </tbody>
2381    </table>
2382
2383-   示例
2384
2385    ```
2386    var test = this.$element('getImageData');
2387    var ctx = test.getContext('2d');
2388    var imageData = ctx.getImageData(0, 0, 280, 300);
2389    ```
2390
2391
2392## putImageData\(\)<a name="zh-cn_topic_0000001173164707_section15774154925515"></a>
2393
2394使用ImageData数据填充新的矩形区域。
2395
2396-   参数
2397
2398    <a name="zh-cn_topic_0000001173164707_table1915122872412"></a>
2399    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1619052872418"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p3190122872418"><a name="zh-cn_topic_0000001173164707_p3190122872418"></a><a name="zh-cn_topic_0000001173164707_p3190122872418"></a>参数</p>
2400    </th>
2401    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p5190528172413"><a name="zh-cn_topic_0000001173164707_p5190528172413"></a><a name="zh-cn_topic_0000001173164707_p5190528172413"></a>类型</p>
2402    </th>
2403    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p2019072814241"><a name="zh-cn_topic_0000001173164707_p2019072814241"></a><a name="zh-cn_topic_0000001173164707_p2019072814241"></a>描述</p>
2404    </th>
2405    </tr>
2406    </thead>
2407    <tbody><tr id="zh-cn_topic_0000001173164707_row1819032813242"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1819052882414"><a name="zh-cn_topic_0000001173164707_p1819052882414"></a><a name="zh-cn_topic_0000001173164707_p1819052882414"></a>imagedata</p>
2408    </td>
2409    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p16190112815243"><a name="zh-cn_topic_0000001173164707_p16190112815243"></a><a name="zh-cn_topic_0000001173164707_p16190112815243"></a>Object</p>
2410    </td>
2411    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1190102816243"><a name="zh-cn_topic_0000001173164707_p1190102816243"></a><a name="zh-cn_topic_0000001173164707_p1190102816243"></a>包含像素值的ImageData对象。</p>
2412    </td>
2413    </tr>
2414    <tr id="zh-cn_topic_0000001173164707_row1219012882416"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p51901828112411"><a name="zh-cn_topic_0000001173164707_p51901828112411"></a><a name="zh-cn_topic_0000001173164707_p51901828112411"></a>dx</p>
2415    </td>
2416    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p14190202892413"><a name="zh-cn_topic_0000001173164707_p14190202892413"></a><a name="zh-cn_topic_0000001173164707_p14190202892413"></a>number</p>
2417    </td>
2418    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p171911828202414"><a name="zh-cn_topic_0000001173164707_p171911828202414"></a><a name="zh-cn_topic_0000001173164707_p171911828202414"></a>填充区域在x轴方向的偏移量。</p>
2419    </td>
2420    </tr>
2421    <tr id="zh-cn_topic_0000001173164707_row12191102872416"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p0191122802417"><a name="zh-cn_topic_0000001173164707_p0191122802417"></a><a name="zh-cn_topic_0000001173164707_p0191122802417"></a>dy</p>
2422    </td>
2423    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p519118288246"><a name="zh-cn_topic_0000001173164707_p519118288246"></a><a name="zh-cn_topic_0000001173164707_p519118288246"></a>number</p>
2424    </td>
2425    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p7191328102418"><a name="zh-cn_topic_0000001173164707_p7191328102418"></a><a name="zh-cn_topic_0000001173164707_p7191328102418"></a>填充区域在y轴方向的偏移量。</p>
2426    </td>
2427    </tr>
2428    <tr id="zh-cn_topic_0000001173164707_row1319120283245"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p419112283249"><a name="zh-cn_topic_0000001173164707_p419112283249"></a><a name="zh-cn_topic_0000001173164707_p419112283249"></a>dirtyX</p>
2429    </td>
2430    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1419117288248"><a name="zh-cn_topic_0000001173164707_p1419117288248"></a><a name="zh-cn_topic_0000001173164707_p1419117288248"></a>number</p>
2431    </td>
2432    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p8191128172412"><a name="zh-cn_topic_0000001173164707_p8191128172412"></a><a name="zh-cn_topic_0000001173164707_p8191128172412"></a>源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。</p>
2433    </td>
2434    </tr>
2435    <tr id="zh-cn_topic_0000001173164707_row14191128142419"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p131911528162418"><a name="zh-cn_topic_0000001173164707_p131911528162418"></a><a name="zh-cn_topic_0000001173164707_p131911528162418"></a>dirtyY</p>
2436    </td>
2437    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p1919119281244"><a name="zh-cn_topic_0000001173164707_p1919119281244"></a><a name="zh-cn_topic_0000001173164707_p1919119281244"></a>number</p>
2438    </td>
2439    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p11191728132414"><a name="zh-cn_topic_0000001173164707_p11191728132414"></a><a name="zh-cn_topic_0000001173164707_p11191728132414"></a>源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。</p>
2440    </td>
2441    </tr>
2442    <tr id="zh-cn_topic_0000001173164707_row14191182813241"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p191911728162419"><a name="zh-cn_topic_0000001173164707_p191911728162419"></a><a name="zh-cn_topic_0000001173164707_p191911728162419"></a>dirtyWidth</p>
2443    </td>
2444    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p3191162815245"><a name="zh-cn_topic_0000001173164707_p3191162815245"></a><a name="zh-cn_topic_0000001173164707_p3191162815245"></a>number</p>
2445    </td>
2446    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p119162813242"><a name="zh-cn_topic_0000001173164707_p119162813242"></a><a name="zh-cn_topic_0000001173164707_p119162813242"></a>源图像数据矩形裁切范围的宽度。</p>
2447    </td>
2448    </tr>
2449    <tr id="zh-cn_topic_0000001173164707_row519113281242"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p19191122832420"><a name="zh-cn_topic_0000001173164707_p19191122832420"></a><a name="zh-cn_topic_0000001173164707_p19191122832420"></a>dirtyHeight</p>
2450    </td>
2451    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p31910280243"><a name="zh-cn_topic_0000001173164707_p31910280243"></a><a name="zh-cn_topic_0000001173164707_p31910280243"></a>number</p>
2452    </td>
2453    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p10191172842415"><a name="zh-cn_topic_0000001173164707_p10191172842415"></a><a name="zh-cn_topic_0000001173164707_p10191172842415"></a>源图像数据矩形裁切范围的高度。</p>
2454    </td>
2455    </tr>
2456    </tbody>
2457    </table>
2458
2459-   返回值
2460
2461    无
2462
2463-   示例
2464
2465    ```
2466    var test = this.$element('putImageData');
2467    var ctx = test.getContext('2d');
2468    var imgData = ctx.createImageData(100, 100);
2469    for (var i = 0; i < imgData.data.length; i += 4) {
2470      imgData.data[i + 0] = 255;
2471      imgData.data[i + 1] = 0;
2472      imgData.data[i + 2] = 0;
2473      imgData.data[i + 3] = 255;
2474    }
2475    ctx.putImageData(imgData, 10, 10);
2476    ```
2477
2478    ![](figures/zh-cn_image_0000001166760190.png)
2479
2480
2481## setLineDash\(\)<a name="zh-cn_topic_0000001173164707_section1934985155516"></a>
2482
2483设置画布的虚线样式。
2484
2485-   参数
2486
2487    <a name="zh-cn_topic_0000001173164707_table7928161714252"></a>
2488    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row2946131732512"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p12946171742513"><a name="zh-cn_topic_0000001173164707_p12946171742513"></a><a name="zh-cn_topic_0000001173164707_p12946171742513"></a>参数</p>
2489    </th>
2490    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p9946517172511"><a name="zh-cn_topic_0000001173164707_p9946517172511"></a><a name="zh-cn_topic_0000001173164707_p9946517172511"></a>类型</p>
2491    </th>
2492    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p0946121762513"><a name="zh-cn_topic_0000001173164707_p0946121762513"></a><a name="zh-cn_topic_0000001173164707_p0946121762513"></a>描述</p>
2493    </th>
2494    </tr>
2495    </thead>
2496    <tbody><tr id="zh-cn_topic_0000001173164707_row1694611713251"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1494621722516"><a name="zh-cn_topic_0000001173164707_p1494621722516"></a><a name="zh-cn_topic_0000001173164707_p1494621722516"></a>segments</p>
2497    </td>
2498    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p139471217152513"><a name="zh-cn_topic_0000001173164707_p139471217152513"></a><a name="zh-cn_topic_0000001173164707_p139471217152513"></a>Array</p>
2499    </td>
2500    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p10947141782515"><a name="zh-cn_topic_0000001173164707_p10947141782515"></a><a name="zh-cn_topic_0000001173164707_p10947141782515"></a>作为数组用来描述线段如何交替和间距长度。</p>
2501    </td>
2502    </tr>
2503    </tbody>
2504    </table>
2505
2506-   返回值
2507
2508    无
2509
2510-   示例
2511
2512    ```
2513    ctx.arc(100, 75, 50, 0, 6.28);
2514    ctx.setLineDash([10,20]);
2515    ctx.stroke();
2516    ```
2517
2518    ![](figures/zh-cn_image_0000001166920136.png)
2519
2520
2521## getLineDash\(\)<a name="zh-cn_topic_0000001173164707_section522105285519"></a>
2522
2523获得当前画布的虚线样式。
2524
2525-   参数
2526
2527    无
2528
2529-   返回值
2530
2531    <a name="zh-cn_topic_0000001173164707_table7827188122614"></a>
2532    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row58489882610"><th class="cellrowborder" valign="top" width="19.77%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001173164707_p084898122610"><a name="zh-cn_topic_0000001173164707_p084898122610"></a><a name="zh-cn_topic_0000001173164707_p084898122610"></a>类型</p>
2533    </th>
2534    <th class="cellrowborder" valign="top" width="80.23%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001173164707_p58488817262"><a name="zh-cn_topic_0000001173164707_p58488817262"></a><a name="zh-cn_topic_0000001173164707_p58488817262"></a>说明</p>
2535    </th>
2536    </tr>
2537    </thead>
2538    <tbody><tr id="zh-cn_topic_0000001173164707_row138486802613"><td class="cellrowborder" valign="top" width="19.77%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p38481582261"><a name="zh-cn_topic_0000001173164707_p38481582261"></a><a name="zh-cn_topic_0000001173164707_p38481582261"></a>Array</p>
2539    </td>
2540    <td class="cellrowborder" valign="top" width="80.23%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p784813811263"><a name="zh-cn_topic_0000001173164707_p784813811263"></a><a name="zh-cn_topic_0000001173164707_p784813811263"></a>返回数组，该数组用来描述线段如何交替和间距长度。。</p>
2541    </td>
2542    </tr>
2543    </tbody>
2544    </table>
2545
2546-   示例
2547
2548    ```
2549    var info = ctx.getLineDash();
2550    ```
2551
2552
2553## lineDashOffset<a name="zh-cn_topic_0000001173164707_section8283548889"></a>
2554
2555设置画布的虚线偏移量。
2556
2557-   参数
2558
2559    <a name="zh-cn_topic_0000001173164707_table661840172615"></a>
2560    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row147974012263"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p137944010269"><a name="zh-cn_topic_0000001173164707_p137944010269"></a><a name="zh-cn_topic_0000001173164707_p137944010269"></a>参数</p>
2561    </th>
2562    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p879340142613"><a name="zh-cn_topic_0000001173164707_p879340142613"></a><a name="zh-cn_topic_0000001173164707_p879340142613"></a>类型</p>
2563    </th>
2564    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p167912409261"><a name="zh-cn_topic_0000001173164707_p167912409261"></a><a name="zh-cn_topic_0000001173164707_p167912409261"></a>描述</p>
2565    </th>
2566    </tr>
2567    </thead>
2568    <tbody><tr id="zh-cn_topic_0000001173164707_row1793401268"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p679940122610"><a name="zh-cn_topic_0000001173164707_p679940122610"></a><a name="zh-cn_topic_0000001173164707_p679940122610"></a>value</p>
2569    </td>
2570    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p16801740132611"><a name="zh-cn_topic_0000001173164707_p16801740132611"></a><a name="zh-cn_topic_0000001173164707_p16801740132611"></a>number</p>
2571    </td>
2572    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p980174016264"><a name="zh-cn_topic_0000001173164707_p980174016264"></a><a name="zh-cn_topic_0000001173164707_p980174016264"></a>精度为float，默认为0.0。</p>
2573    </td>
2574    </tr>
2575    </tbody>
2576    </table>
2577
2578-   返回值
2579
2580    无
2581
2582-   示例
2583
2584    ```
2585    ctx.arc(100, 75, 50, 0, 6.28);
2586    ctx.setLineDash([10,20]);
2587    ctx.lineDashOffset = 10.0;
2588    ctx.stroke();
2589    ```
2590
2591    ![](figures/zh-cn_image_0000001212320089.png)
2592
2593
2594## globalCompositeOperation<a name="zh-cn_topic_0000001173164707_section123871750284"></a>
2595
2596设置合成操作的方式。
2597
2598-   参数
2599
2600    <a name="zh-cn_topic_0000001173164707_table894332519273"></a>
2601    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1961162592715"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p7961132562710"><a name="zh-cn_topic_0000001173164707_p7961132562710"></a><a name="zh-cn_topic_0000001173164707_p7961132562710"></a>参数</p>
2602    </th>
2603    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p18961025162717"><a name="zh-cn_topic_0000001173164707_p18961025162717"></a><a name="zh-cn_topic_0000001173164707_p18961025162717"></a>类型</p>
2604    </th>
2605    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p3961192502717"><a name="zh-cn_topic_0000001173164707_p3961192502717"></a><a name="zh-cn_topic_0000001173164707_p3961192502717"></a>描述</p>
2606    </th>
2607    </tr>
2608    </thead>
2609    <tbody><tr id="zh-cn_topic_0000001173164707_row10961162532713"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p1896112258278"><a name="zh-cn_topic_0000001173164707_p1896112258278"></a><a name="zh-cn_topic_0000001173164707_p1896112258278"></a>type</p>
2610    </td>
2611    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p8961142512276"><a name="zh-cn_topic_0000001173164707_p8961142512276"></a><a name="zh-cn_topic_0000001173164707_p8961142512276"></a>string</p>
2612    </td>
2613    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1796132510275"><a name="zh-cn_topic_0000001173164707_p1796132510275"></a><a name="zh-cn_topic_0000001173164707_p1796132510275"></a>合成操作的类型字段。可选值有source-over(默认值)，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。</p>
2614    </td>
2615    </tr>
2616    </tbody>
2617    </table>
2618
2619    属性值：
2620
2621    <a name="zh-cn_topic_0000001173164707_table16858736162715"></a>
2622    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1789616363276"><th class="cellrowborder" valign="top" width="12.78%" id="mcps1.1.3.1.1"><p id="zh-cn_topic_0000001173164707_p3896113612272"><a name="zh-cn_topic_0000001173164707_p3896113612272"></a><a name="zh-cn_topic_0000001173164707_p3896113612272"></a>值</p>
2623    </th>
2624    <th class="cellrowborder" valign="top" width="87.22%" id="mcps1.1.3.1.2"><p id="zh-cn_topic_0000001173164707_p1389653616271"><a name="zh-cn_topic_0000001173164707_p1389653616271"></a><a name="zh-cn_topic_0000001173164707_p1389653616271"></a>描述</p>
2625    </th>
2626    </tr>
2627    </thead>
2628    <tbody><tr id="zh-cn_topic_0000001173164707_row5896163615275"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p148962361278"><a name="zh-cn_topic_0000001173164707_p148962361278"></a><a name="zh-cn_topic_0000001173164707_p148962361278"></a>source-over</p>
2629    </td>
2630    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p4897123622710"><a name="zh-cn_topic_0000001173164707_p4897123622710"></a><a name="zh-cn_topic_0000001173164707_p4897123622710"></a>在现有绘制内容上显示新绘制内容，属于默认值。</p>
2631    </td>
2632    </tr>
2633    <tr id="zh-cn_topic_0000001173164707_row1789713361277"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p08971936182713"><a name="zh-cn_topic_0000001173164707_p08971936182713"></a><a name="zh-cn_topic_0000001173164707_p08971936182713"></a>source-atop</p>
2634    </td>
2635    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p489743619271"><a name="zh-cn_topic_0000001173164707_p489743619271"></a><a name="zh-cn_topic_0000001173164707_p489743619271"></a>在现有绘制内容顶部显示新绘制内容。</p>
2636    </td>
2637    </tr>
2638    <tr id="zh-cn_topic_0000001173164707_row38977367271"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p1897183620278"><a name="zh-cn_topic_0000001173164707_p1897183620278"></a><a name="zh-cn_topic_0000001173164707_p1897183620278"></a>source-in</p>
2639    </td>
2640    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p4897173615271"><a name="zh-cn_topic_0000001173164707_p4897173615271"></a><a name="zh-cn_topic_0000001173164707_p4897173615271"></a>在现有绘制内容中显示新绘制内容。</p>
2641    </td>
2642    </tr>
2643    <tr id="zh-cn_topic_0000001173164707_row38971336142717"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p158971136112719"><a name="zh-cn_topic_0000001173164707_p158971136112719"></a><a name="zh-cn_topic_0000001173164707_p158971136112719"></a>source-out</p>
2644    </td>
2645    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p2897103642715"><a name="zh-cn_topic_0000001173164707_p2897103642715"></a><a name="zh-cn_topic_0000001173164707_p2897103642715"></a>在现有绘制内容之外显示新绘制内容。</p>
2646    </td>
2647    </tr>
2648    <tr id="zh-cn_topic_0000001173164707_row889714368273"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p138974368279"><a name="zh-cn_topic_0000001173164707_p138974368279"></a><a name="zh-cn_topic_0000001173164707_p138974368279"></a>destination-over</p>
2649    </td>
2650    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p11897123622719"><a name="zh-cn_topic_0000001173164707_p11897123622719"></a><a name="zh-cn_topic_0000001173164707_p11897123622719"></a>在新绘制内容上方显示现有绘制内容。</p>
2651    </td>
2652    </tr>
2653    <tr id="zh-cn_topic_0000001173164707_row28972366277"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p148971836152715"><a name="zh-cn_topic_0000001173164707_p148971836152715"></a><a name="zh-cn_topic_0000001173164707_p148971836152715"></a>destination-atop</p>
2654    </td>
2655    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p1789783602717"><a name="zh-cn_topic_0000001173164707_p1789783602717"></a><a name="zh-cn_topic_0000001173164707_p1789783602717"></a>在新绘制内容顶部显示现有绘制内容。</p>
2656    </td>
2657    </tr>
2658    <tr id="zh-cn_topic_0000001173164707_row198971836162712"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p17897536112720"><a name="zh-cn_topic_0000001173164707_p17897536112720"></a><a name="zh-cn_topic_0000001173164707_p17897536112720"></a>destination-in</p>
2659    </td>
2660    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p789783692713"><a name="zh-cn_topic_0000001173164707_p789783692713"></a><a name="zh-cn_topic_0000001173164707_p789783692713"></a>在新绘制内容中显示现有绘制内容。</p>
2661    </td>
2662    </tr>
2663    <tr id="zh-cn_topic_0000001173164707_row138978361271"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p1589753622718"><a name="zh-cn_topic_0000001173164707_p1589753622718"></a><a name="zh-cn_topic_0000001173164707_p1589753622718"></a>destination-out</p>
2664    </td>
2665    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p19897036192710"><a name="zh-cn_topic_0000001173164707_p19897036192710"></a><a name="zh-cn_topic_0000001173164707_p19897036192710"></a>在新绘制内容外显示现有绘制内容。</p>
2666    </td>
2667    </tr>
2668    <tr id="zh-cn_topic_0000001173164707_row2897143622719"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p489733613272"><a name="zh-cn_topic_0000001173164707_p489733613272"></a><a name="zh-cn_topic_0000001173164707_p489733613272"></a>lighter</p>
2669    </td>
2670    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p589793615274"><a name="zh-cn_topic_0000001173164707_p589793615274"></a><a name="zh-cn_topic_0000001173164707_p589793615274"></a>显示新绘制内容和现有绘制内容。</p>
2671    </td>
2672    </tr>
2673    <tr id="zh-cn_topic_0000001173164707_row289716361272"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p1389720362272"><a name="zh-cn_topic_0000001173164707_p1389720362272"></a><a name="zh-cn_topic_0000001173164707_p1389720362272"></a>copy</p>
2674    </td>
2675    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p589719364271"><a name="zh-cn_topic_0000001173164707_p589719364271"></a><a name="zh-cn_topic_0000001173164707_p589719364271"></a>显示新绘制内容而忽略现有绘制内容。</p>
2676    </td>
2677    </tr>
2678    <tr id="zh-cn_topic_0000001173164707_row16897103652713"><td class="cellrowborder" valign="top" width="12.78%" headers="mcps1.1.3.1.1 "><p id="zh-cn_topic_0000001173164707_p1489793612279"><a name="zh-cn_topic_0000001173164707_p1489793612279"></a><a name="zh-cn_topic_0000001173164707_p1489793612279"></a>xor</p>
2679    </td>
2680    <td class="cellrowborder" valign="top" width="87.22%" headers="mcps1.1.3.1.2 "><p id="zh-cn_topic_0000001173164707_p789718368275"><a name="zh-cn_topic_0000001173164707_p789718368275"></a><a name="zh-cn_topic_0000001173164707_p789718368275"></a>使用异或操作对新绘制内容与现有绘制内容进行融合。</p>
2681    </td>
2682    </tr>
2683    </tbody>
2684    </table>
2685
2686-   返回值
2687
2688    无
2689
2690-   示例
2691
2692    ```
2693    ctx.fillStyle = 'rgb(255,0,0)';
2694    ctx.fillRect(20, 20, 50, 50);
2695    ctx.globalCompositeOperation = 'source-over';
2696    ctx.fillStyle = 'rgb(0,0,255)';
2697    ctx.fillRect(50, 50, 50, 50);
2698    // Start drawing second example
2699    ctx.fillStyle = 'rgb(255,0,0)';
2700    ctx.fillRect(120, 20, 50, 50);
2701    ctx.globalCompositeOperation = 'destination-over';
2702    ctx.fillStyle = 'rgb(0,0,255)';
2703    ctx.fillRect(150, 50, 50, 50);
2704    ```
2705
2706    ![](figures/zh-cn_image_0000001212440095.png)
2707
2708    示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。
2709
2710
2711## shadowBlur<a name="zh-cn_topic_0000001173164707_section6207051888"></a>
2712
2713设置绘制阴影时的模糊级别，默认值为0.0。
2714
2715-   参数
2716
2717    <a name="zh-cn_topic_0000001173164707_table9996192417289"></a>
2718    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1512122513281"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p15127251281"><a name="zh-cn_topic_0000001173164707_p15127251281"></a><a name="zh-cn_topic_0000001173164707_p15127251281"></a>参数</p>
2719    </th>
2720    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1812152514289"><a name="zh-cn_topic_0000001173164707_p1812152514289"></a><a name="zh-cn_topic_0000001173164707_p1812152514289"></a>类型</p>
2721    </th>
2722    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p14125256281"><a name="zh-cn_topic_0000001173164707_p14125256281"></a><a name="zh-cn_topic_0000001173164707_p14125256281"></a>描述</p>
2723    </th>
2724    </tr>
2725    </thead>
2726    <tbody><tr id="zh-cn_topic_0000001173164707_row171242519288"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p151210252280"><a name="zh-cn_topic_0000001173164707_p151210252280"></a><a name="zh-cn_topic_0000001173164707_p151210252280"></a>blur</p>
2727    </td>
2728    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p31212513284"><a name="zh-cn_topic_0000001173164707_p31212513284"></a><a name="zh-cn_topic_0000001173164707_p31212513284"></a>number</p>
2729    </td>
2730    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p61202519282"><a name="zh-cn_topic_0000001173164707_p61202519282"></a><a name="zh-cn_topic_0000001173164707_p61202519282"></a>设置模糊效果的程度值，值越大越模糊，精度为float 。</p>
2731    </td>
2732    </tr>
2733    </tbody>
2734    </table>
2735
2736-   返回值
2737
2738    无
2739
2740-   示例
2741
2742    ```
2743    ctx.shadowBlur = 30;
2744    ctx.shadowColor = 'rgb(0,0,0)';
2745    ctx.fillStyle = 'rgb(255,0,0)';
2746    ctx.fillRect(20, 20, 100, 80);
2747    ```
2748
2749    ![](figures/zh-cn_image_0000001166441668.png)
2750
2751
2752## shadowColor<a name="zh-cn_topic_0000001173164707_section42724396120"></a>
2753
2754设置绘制阴影时的阴影颜色。
2755
2756-   参数
2757
2758    <a name="zh-cn_topic_0000001173164707_table2196196152919"></a>
2759    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row221256162918"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1621219612291"><a name="zh-cn_topic_0000001173164707_p1621219612291"></a><a name="zh-cn_topic_0000001173164707_p1621219612291"></a>参数</p>
2760    </th>
2761    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p112127613291"><a name="zh-cn_topic_0000001173164707_p112127613291"></a><a name="zh-cn_topic_0000001173164707_p112127613291"></a>类型</p>
2762    </th>
2763    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p102121966294"><a name="zh-cn_topic_0000001173164707_p102121966294"></a><a name="zh-cn_topic_0000001173164707_p102121966294"></a>描述</p>
2764    </th>
2765    </tr>
2766    </thead>
2767    <tbody><tr id="zh-cn_topic_0000001173164707_row1321219682914"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p6212186142912"><a name="zh-cn_topic_0000001173164707_p6212186142912"></a><a name="zh-cn_topic_0000001173164707_p6212186142912"></a>color</p>
2768    </td>
2769    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p221236122920"><a name="zh-cn_topic_0000001173164707_p221236122920"></a><a name="zh-cn_topic_0000001173164707_p221236122920"></a>&lt;color&gt;</p>
2770    </td>
2771    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p112223307597"><a name="zh-cn_topic_0000001173164707_p112223307597"></a><a name="zh-cn_topic_0000001173164707_p112223307597"></a>阴影的颜色值。</p>
2772    </td>
2773    </tr>
2774    </tbody>
2775    </table>
2776
2777-   返回值
2778
2779    无
2780
2781-   示例
2782
2783    ```
2784    ctx.shadowBlur = 30;
2785    ctx.shadowColor = 'rgb(0,0,255)';
2786    ctx.fillStyle = 'rgb(255,0,0)';
2787    ctx.fillRect(30, 30, 100, 100);
2788    ```
2789
2790    ![](figures/zh-cn_image_0000001166601638.png)
2791
2792
2793## shadowOffsetX<a name="zh-cn_topic_0000001173164707_section1616174021219"></a>
2794
2795设置绘制阴影时和原有对象的水平偏移值。
2796
2797-   参数
2798
2799    <a name="zh-cn_topic_0000001173164707_table2274164413292"></a>
2800    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row229011445292"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p1329034420297"><a name="zh-cn_topic_0000001173164707_p1329034420297"></a><a name="zh-cn_topic_0000001173164707_p1329034420297"></a>参数</p>
2801    </th>
2802    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p19290444112916"><a name="zh-cn_topic_0000001173164707_p19290444112916"></a><a name="zh-cn_topic_0000001173164707_p19290444112916"></a>类型</p>
2803    </th>
2804    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p529054472920"><a name="zh-cn_topic_0000001173164707_p529054472920"></a><a name="zh-cn_topic_0000001173164707_p529054472920"></a>描述</p>
2805    </th>
2806    </tr>
2807    </thead>
2808    <tbody><tr id="zh-cn_topic_0000001173164707_row122901544132911"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p2029084482915"><a name="zh-cn_topic_0000001173164707_p2029084482915"></a><a name="zh-cn_topic_0000001173164707_p2029084482915"></a>offsetX</p>
2809    </td>
2810    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p122901744162919"><a name="zh-cn_topic_0000001173164707_p122901744162919"></a><a name="zh-cn_topic_0000001173164707_p122901744162919"></a>number</p>
2811    </td>
2812    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1429084432917"><a name="zh-cn_topic_0000001173164707_p1429084432917"></a><a name="zh-cn_topic_0000001173164707_p1429084432917"></a>阴影距离原有对象的x轴方向偏移值。</p>
2813    </td>
2814    </tr>
2815    </tbody>
2816    </table>
2817
2818-   返回值
2819
2820    无
2821
2822-   示例
2823
2824    ```
2825    ctx.shadowBlur = 10;
2826    ctx.shadowOffsetX = 20;
2827    ctx.shadowColor = 'rgb(0,0,0)';
2828    ctx.fillStyle = 'rgb(255,0,0)';
2829    ctx.fillRect(20, 20, 100, 80);
2830    ```
2831
2832    ![](figures/zh-cn_image_0000001212161519.png)
2833
2834
2835## shadowOffsetY<a name="zh-cn_topic_0000001173164707_section272013417128"></a>
2836
2837设置绘制阴影时和原有对象的垂直偏移值。
2838
2839-   参数
2840
2841    <a name="zh-cn_topic_0000001173164707_table20807026143014"></a>
2842    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row18231126113017"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p7823192615306"><a name="zh-cn_topic_0000001173164707_p7823192615306"></a><a name="zh-cn_topic_0000001173164707_p7823192615306"></a>参数</p>
2843    </th>
2844    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p88231426193012"><a name="zh-cn_topic_0000001173164707_p88231426193012"></a><a name="zh-cn_topic_0000001173164707_p88231426193012"></a>类型</p>
2845    </th>
2846    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p16823626193018"><a name="zh-cn_topic_0000001173164707_p16823626193018"></a><a name="zh-cn_topic_0000001173164707_p16823626193018"></a>描述</p>
2847    </th>
2848    </tr>
2849    </thead>
2850    <tbody><tr id="zh-cn_topic_0000001173164707_row178231526113019"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p13823172643018"><a name="zh-cn_topic_0000001173164707_p13823172643018"></a><a name="zh-cn_topic_0000001173164707_p13823172643018"></a>offsetY</p>
2851    </td>
2852    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p482312683018"><a name="zh-cn_topic_0000001173164707_p482312683018"></a><a name="zh-cn_topic_0000001173164707_p482312683018"></a>number</p>
2853    </td>
2854    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p4823182619305"><a name="zh-cn_topic_0000001173164707_p4823182619305"></a><a name="zh-cn_topic_0000001173164707_p4823182619305"></a>阴影距离原有对象的y轴方向偏移值。</p>
2855    </td>
2856    </tr>
2857    </tbody>
2858    </table>
2859
2860-   返回值
2861
2862    无
2863
2864-   示例
2865
2866    ```
2867    ctx.shadowBlur = 10;
2868    ctx.shadowOffsetY = 20;
2869    ctx.shadowColor = 'rgb(0,0,0)';
2870    ctx.fillStyle = 'rgb(255,0,0)';
2871    ctx.fillRect(30, 30, 100, 100);
2872    ```
2873
2874    ![](figures/zh-cn_image_0000001212081557.png)
2875
2876
2877## imageSmoothingEnabled<sup>6+</sup><a name="zh-cn_topic_0000001173164707_section770341132716"></a>
2878
2879用于设置绘制图片时是否进行图像平滑度调整。
2880
2881-   参数
2882
2883    <a name="zh-cn_topic_0000001173164707_table4704181112718"></a>
2884    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row77044112276"><th class="cellrowborder" valign="top" width="14.202020202020202%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p87041811112710"><a name="zh-cn_topic_0000001173164707_p87041811112710"></a><a name="zh-cn_topic_0000001173164707_p87041811112710"></a>参数</p>
2885    </th>
2886    <th class="cellrowborder" valign="top" width="13.717171717171716%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p47040117279"><a name="zh-cn_topic_0000001173164707_p47040117279"></a><a name="zh-cn_topic_0000001173164707_p47040117279"></a>类型</p>
2887    </th>
2888    <th class="cellrowborder" valign="top" width="72.08080808080808%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p870471116273"><a name="zh-cn_topic_0000001173164707_p870471116273"></a><a name="zh-cn_topic_0000001173164707_p870471116273"></a>描述</p>
2889    </th>
2890    </tr>
2891    </thead>
2892    <tbody><tr id="zh-cn_topic_0000001173164707_row1370461142715"><td class="cellrowborder" valign="top" width="14.202020202020202%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p77051611172716"><a name="zh-cn_topic_0000001173164707_p77051611172716"></a><a name="zh-cn_topic_0000001173164707_p77051611172716"></a>enabled</p>
2893    </td>
2894    <td class="cellrowborder" valign="top" width="13.717171717171716%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p4705141112718"><a name="zh-cn_topic_0000001173164707_p4705141112718"></a><a name="zh-cn_topic_0000001173164707_p4705141112718"></a>boolean</p>
2895    </td>
2896    <td class="cellrowborder" valign="top" width="72.08080808080808%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p17314141615520"><a name="zh-cn_topic_0000001173164707_p17314141615520"></a><a name="zh-cn_topic_0000001173164707_p17314141615520"></a>是否进行图像平滑度调整，默认值为true，即启用。</p>
2897    </td>
2898    </tr>
2899    </tbody>
2900    </table>
2901
2902-   返回值
2903
2904    无
2905
2906-   示例
2907
2908    ```
2909    var img = new Image();
2910    img.src = 'common/image/example.jpg';
2911    img.onload = function() {
2912      ctx.imageSmoothingEnabled = false;
2913      ctx.drawImage(img, 0, 0, 400, 200);
2914    };
2915    ```
2916
2917    ![](figures/smoothOff.png)
2918
2919
2920## transferFromImageBitmap\(\)<sup>7+</sup><a name="zh-cn_topic_0000001173164707_section9849145418469"></a>
2921
2922显示给定的ImageBitmap对象。
2923
2924-   参数
2925
2926    <a name="zh-cn_topic_0000001173164707_table1182233717517"></a>
2927    <table><thead align="left"><tr id="zh-cn_topic_0000001173164707_row1982219374511"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164707_p19822133713519"><a name="zh-cn_topic_0000001173164707_p19822133713519"></a><a name="zh-cn_topic_0000001173164707_p19822133713519"></a>参数</p>
2928    </th>
2929    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164707_p1282353716519"><a name="zh-cn_topic_0000001173164707_p1282353716519"></a><a name="zh-cn_topic_0000001173164707_p1282353716519"></a>类型</p>
2930    </th>
2931    <th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164707_p88231837195120"><a name="zh-cn_topic_0000001173164707_p88231837195120"></a><a name="zh-cn_topic_0000001173164707_p88231837195120"></a>描述</p>
2932    </th>
2933    </tr>
2934    </thead>
2935    <tbody><tr id="zh-cn_topic_0000001173164707_row13823143745115"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164707_p882313775110"><a name="zh-cn_topic_0000001173164707_p882313775110"></a><a name="zh-cn_topic_0000001173164707_p882313775110"></a>bitmap</p>
2936    </td>
2937    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164707_p12823183714517"><a name="zh-cn_topic_0000001173164707_p12823183714517"></a><a name="zh-cn_topic_0000001173164707_p12823183714517"></a>ImageBitmap</p>
2938    </td>
2939    <td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164707_p1563323875414"><a name="zh-cn_topic_0000001173164707_p1563323875414"></a><a name="zh-cn_topic_0000001173164707_p1563323875414"></a>待显示的ImageBitmap对象。</p>
2940    </td>
2941    </tr>
2942    </tbody>
2943    </table>
2944
2945-   返回值
2946
2947    无
2948
2949-   示例
2950
2951    ```
2952    var canvas = this.$refs.canvasId.getContext('2d');
2953    var offscreen = new OffscreenCanvas(500,500);
2954    var offscreenCanvasCtx = offscreen.getContext("2d");
2955    offscreenCanvasCtx.fillRect(0, 0, 200, 200);
2956
2957    var bitmap = offscreen.transferToImageBitmap();
2958    canvas.transferFromImageBitmap(bitmap);
2959    ```
2960
2961    ![](figures/zh-cn_image_0000001212320091.png)
2962
2963
2964