线条操作
| 属性 | 说明 |
|---|
| lineWidth | 定义线条宽度 |
| lineCap | 定义线帽样式 |
| lineJoin | 定义两个线条交接处样式 |
| 方法 | 说明 |
|---|
| setLineDash() | 定义线条的虚实样式 |
lineWidth属性----定义线条宽度
- 属性取值为整数，单位默认为px
- Canvas是基于状态来绘制图形的，在同一路径中，状态会一直被使用，我们可以使用beginPath和closePath来开辟和关闭一条路径
- 假设对于绘制的矩形设置了lineWidth属性，则矩形的宽度为：width+lineWidth，高度为：height+lineWidth
lineCap属性----定义线帽样式
- lineCap属性的取值只有三个
| 属性值 | 说明 |
|---|
| Butt | 默认值，无线帽 |
| Round | 圆形线帽 |
| Square | 正方形线帽 |
- 圆形线帽和正方形线帽会使线条稍微变长，因为他们给线条增加了线帽部分
- 圆形线帽是在每条线的开始和结尾处都增加一个半圆，半圆的直径为线宽
正方形线帽是在每条线的开始和结尾处都增加一个长方形，长方形的宽度为线宽的一半，高度保持线宽
- lineCap属性只对路径的开始和结尾起作用，线条与线条交接处的样式需要lineJoin属性
lineJoin属性----定义两个线条交接处样式
- lineJoin属性取值如下
| 属性值 | 说明 |
|---|
| miter | 默认值，尖角 |
| round | 圆角 |
| bevel | 斜角 |
- 三种取值的样式
setLineDash方法----定义线条的虚实样式
- ctx.setLineDash(array)，参数是一个数组组合
- 方法参数含义
| 数组组合 | 说明 |
|---|
| 10，5 | 10px实线，5px空白 |
| 10，5，5，5 | 10px实线，5px空白，5px实线，5px空白 |
- IE不支持
文本操作
| 属性 | 说明 |
|---|
| font | 定义文本字体样式（大小、粗细等） |
| textAlign | 定义文本水平对齐方式 |
| textBaseline | 定义文本垂直对齐方式 |
| fillStyle | 定义画笔填充路径的颜色 |
| strokeStyle | 定义画笔描边路径的颜色 |
| 方法 | 说明 |
|---|
| fillText() | 绘制填充文本 |
| strokeText() | 绘制描边文本 |
| measureText() | 用于获取文本的长度 |
- fillStyle属性都是与fillText()方法配合使用的，用于绘制填充文本
- strokeStyle属性都是与strokeText()方法配合使用的，用于绘制描边文本
文本操作方法
strokeText(text,x,y,maxWidth)
- 参数含义说明：
text：字符串文本
x：文本的横坐标
y：文本的纵坐标
maxWidth：可选参数，表示允许的最大文本宽度，单位px，文本宽度超出会被压缩
fillText(text,x,y,maxWidth)，参数含义同上
measureText()
- 该方法返回一个对象，这个对象有且只有一个width属性，用于获取某个文本的长度，单位px
- 这个属性一般用来实现文本水平居中效果
文本操作属性
font属性
ctx.font = 'font-style font-weight font-size/font-height font-family'
textAlign属性：定义文本水平对齐方式
| 属性值 | 说明 |
|---|
| start | 文本在指定的横坐标开始 |
| end | 文本在指定的横坐标结束 |
| left | 文本左对齐 |
| right | 文本右对齐 |
| center | 文本的中心在指定的横坐标 |
区分start-left和end–right
与阅读习惯相关，left-right亘古不变，但是从左到右阅读，start是左边，end是右边，如果从右向左阅读，start是右边，end是左边
textBaseLine属性：定义文本垂直对齐方式
| 属性值 | 说明 |
|---|
| alphabetic | 文本基线：普通英文字母的基线 |
| top | 文本基线：em方框的顶端 |
| middle | 文本基线：em方框的中心 |
| bottom | 文本基线：em方框的底端 |
