1# CanvasRenderingContext2D对象
2
3
4使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本。
5
6**示例：**
7
8```html
9<!-- xxx.hml -->
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
13```
14
15
16```javascript
17// xxx.js
18export 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}
27```
28
29  ![zh-cn_image_0000001431548113](figures/zh-cn_image_0000001431548113.png)
30
31
32## fillRect()
33
34填充一个矩形。
35
36**参数：**
37
38| 参数 | 类型 | 描述 |
39| -------- | -------- | -------- |
40| x | number | 指定矩形左上角点的x坐标。 |
41| y | number | 指定矩形左上角点的y坐标。 |
42| width | number | 指定矩形的宽度。 |
43| height | number | 指定矩形的高度。 |
44
45**示例：**
46
47 ![zh-cn_image_0000001431388525](figures/zh-cn_image_0000001431388525.png)
48
49
50  ```javascript
51  ctx.fillRect(20, 20, 200, 150);
52  ```
53
54
55## fillStyle
56
57指定绘制的填充色。
58
59**参数：**
60
61| 参数 | 类型 | 描述 |
62| -------- | -------- | -------- |
63| color | &lt;color&gt; | 设置填充区域的颜色。 |
64
65**示例：**
66
67  ![zh-cn_image_0000001431388505](figures/zh-cn_image_0000001431388505.png)
68
69
70  ```javascript
71  ctx.fillStyle = '#0000ff';
72  ctx.fillRect(20, 20, 150, 100);
73  ```
74
75
76## strokeRect()
77
78绘制具有边框的矩形，矩形内部不填充。
79
80**参数：**
81
82| 参数 | 类型 | 描述 |
83| -------- | -------- | -------- |
84| x | number | 指定矩形的左上角x坐标。 |
85| y | number | 指定矩形的左上角y坐标。 |
86| width | number | 指定矩形的宽度。 |
87| height | number | 指定矩形的高度。 |
88
89**示例：**
90
91  ![zh-cn_image_0000001381268264](figures/zh-cn_image_0000001381268264.png)
92
93
94  ```javascript
95  ctx.strokeRect(30, 30, 200, 150);
96  ```
97
98
99## fillText()
100
101绘制填充类文本。
102
103**参数：**
104
105| 参数 | 类型 | 描述 |
106| -------- | -------- | -------- |
107| text | string | 需要绘制的文本内容。 |
108| x | number | 需要绘制的文本的左下角x坐标。 |
109| y | number | 需要绘制的文本的左下角y坐标。 |
110
111**示例：**
112
113  ![zh-cn_image_0000001431548109](figures/zh-cn_image_0000001431548109.png)
114
115
116  ```javascript
117  ctx.font = '35px sans-serif';
118  ctx.fillText("Hello World!", 20, 60);
119  ```
120
121
122## lineWidth
123
124指定绘制线条的宽度值。
125
126**参数：**
127
128| 参数 | 类型 | 描述 |
129| -------- | -------- | -------- |
130| lineWidth | number | 设置绘制线条的宽度。 |
131
132**示例：**
133
134  ![zh-cn_image_0000001431548121](figures/zh-cn_image_0000001431548121.png)
135
136
137  ```javascript
138  ctx.lineWidth = 5;
139  ctx.strokeRect(25, 25, 85, 105);
140  ```
141
142
143## strokeStyle
144
145设置描边的颜色。
146
147**参数：**
148
149| 参数 | 类型 | 描述 |
150| -------- | -------- | -------- |
151| color | &lt;color&gt; | 指定描边使用的颜色 |
152
153**示例：**
154
155  ![zh-cn_image_0000001380789172](figures/zh-cn_image_0000001380789172.png)
156
157
158  ```javascript
159  ctx.lineWidth = 10;
160  ctx.strokeStyle = '#0000ff';
161  ctx.strokeRect(25, 25, 155, 105);
162  ```
163
164
165### stroke()<sup>5+</sup>
166
167进行边框绘制操作。
168
169**示例：**
170
171![zh-cn_image_0000001431388513](figures/zh-cn_image_0000001431388513.png)
172
173  ```javascript
174  ctx.moveTo(25, 25);
175  ctx.lineTo(25, 105);
176  ctx.strokeStyle = 'rgb(0,0,255)';
177  ctx.stroke();
178  ```
179
180
181### beginPath()<sup>5+</sup>
182
183创建一个新的绘制路径。
184
185**示例：**
186
187  ![zh-cn_image_0000001431548125](figures/zh-cn_image_0000001431548125.png)
188
189
190  ```javascript
191  ctx.beginPath();
192  ctx.lineWidth = '6';
193  ctx.strokeStyle = '#0000ff';
194  ctx.moveTo(15, 80);
195  ctx.lineTo(280, 160);
196  ctx.stroke();
197  ```
198
199
200### moveTo()<sup>5+</sup>
201
202路径从当前点移动到指定点。
203
204**参数：**
205
206| 参数 | 类型 | 描述 |
207| -------- | -------- | -------- |
208| x | number | 指定位置的x坐标。 |
209| y | number | 指定位置的y坐标。 |
210
211**示例：**
212
213  ![zh-cn_image_0000001431388529](figures/zh-cn_image_0000001431388529.png)
214
215  ```javascript
216  ctx.beginPath();
217  ctx.moveTo(10, 10);
218  ctx.lineTo(280, 160);
219  ctx.stroke();
220  ```
221
222
223### lineTo()<sup>5+</sup>
224
225从当前点到指定点进行路径连接。
226
227**参数：**
228
229| 参数 | 类型 | 描述 |
230| -------- | -------- | -------- |
231| x | number | 指定位置的x坐标。 |
232| y | number | 指定位置的y坐标。 |
233
234**示例：**
235
236![zh-cn_image_0000001431148365](figures/zh-cn_image_0000001431148365.png)
237
238  ```javascript
239  ctx.beginPath();
240  ctx.moveTo(10, 10);
241  ctx.lineTo(280, 160);
242  ctx.stroke();
243  ```
244
245
246### closePath()<sup>5+</sup>
247
248结束当前路径形成一个封闭路径。
249
250**示例：**
251
252  ![zh-cn_image_0000001381268284](figures/zh-cn_image_0000001381268284.png)
253
254
255  ```javascript
256  ctx.beginPath();
257  ctx.moveTo(30, 30);
258  ctx.lineTo(110, 30);
259  ctx.lineTo(70, 90);
260  ctx.closePath();
261  ctx.stroke();
262  ```
263
264
265## font
266
267设置文本绘制中的字体样式。
268
269**参数：**
270
271| 参数 | 类型 | 描述 |
272| -------- | -------- | -------- |
273| value | string | 字体样式支持：sans-serif,&nbsp;serif,&nbsp;monospace，该属性默认值为30px&nbsp;HYQiHei-65S。 |
274
275**示例：**
276
277  ![zh-cn_image_0000001381108328](figures/zh-cn_image_0000001381108328.png)
278
279
280  ```javascript
281  ctx.font = '30px sans-serif';
282  ctx.fillText("Hello World", 20, 60);
283  ```
284
285
286## textAlign
287
288设置文本绘制中的文本对齐方式。
289
290**参数：**
291
292| 参数 | 类型 | 描述 |
293| -------- | -------- | -------- |
294| align | string | 可选值为：<br/>-&nbsp;left（默认）：文本左对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;center：文本居中对齐； |
295
296**示例：**
297
298  ![zh-cn_image_0000001431388517](figures/zh-cn_image_0000001431388517.png)
299
300
301  ```javascript
302  ctx.strokeStyle = '#0000ff';
303  ctx.moveTo(140, 10);
304  ctx.lineTo(140, 160);
305  ctx.stroke();
306
307  ctx.font = '18px sans-serif';
308
309  // Show the different textAlign values
310  ctx.textAlign = 'left';
311  ctx.fillText('textAlign=left', 140, 100);
312  ctx.textAlign = 'center';
313  ctx.fillText('textAlign=center',140, 120);
314  ctx.textAlign = 'right';
315  ctx.fillText('textAlign=right',140, 140);
316  ```
317
318
319## arc()<sup>5+</sup>
320
321绘制弧线路径。
322
323**参数：**
324
325| 参数 | 类型 | 描述 |
326| -------- | -------- | -------- |
327| x | number | 弧线圆心的x坐标值。 |
328| y | number | 弧线圆心的y坐标值。 |
329| radius | number | 弧线的圆半径。 |
330| startAngle | number | 弧线的起始弧度。 |
331| endAngle | number | 弧线的终止弧度。 |
332| anticlockwise | boolean | 是否逆时针绘制圆弧。 |
333
334**示例：**
335
336![zh-cn_image_0000001381108320](figures/zh-cn_image_0000001381108320.png)
337
338  ```javascript
339  ctx.beginPath();
340  ctx.arc(100, 75, 50, 0, 6.28);
341  ctx.stroke();
342  ```
343
344
345### rect()<sup>5+</sup>
346
347创建矩形路径。
348
349**参数：**
350
351| 参数 | 类型 | 描述 |
352| -------- | -------- | -------- |
353| x | number | 指定矩形的左上角x坐标值。 |
354| y | number | 指定矩形的左上角y坐标值。 |
355| width | number | 指定矩形的宽度。 |
356| height | number | 指定矩形的高度。 |
357
358**示例：**
359
360![zh-cn_image_0000001381108312](figures/zh-cn_image_0000001381108312.png)
361
362  ```javascript
363  ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
364  ctx.stroke(); // Draw it
365  ```
366