# 線條操作
| 屬性 | 說明 |
| --- | --- |
| lineWidth | 定義線條寬度 |
| lineCap | 定義線帽樣式 |
| lineJoin | 定義兩個線條交接處的樣式 |
| 方法 | 說明 |
| --- | --- |
| setLineDash() | 定義線條的虛實樣式 |
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
let canvas = document.getElementById('canvas')
canvas.width = 800
canvas.height = 800
let context = canvas.getContext('2d')
context.lineWidth = 10
context.strokeStyle = '#005588'
context.beginPath()
context.moveTo(100,200)
context.lineTo(700,200)
context.lineCap = 'butt'
context.stroke()
context.beginPath()
context.moveTo(100,400)
context.lineTo(700,400)
context.lineCap = 'round'
context.stroke()
context.beginPath()
context.moveTo(100,600)
context.lineTo(700,600)
context.lineCap = 'square'
context.stroke()
//baseline
context.lineWidth = 1
context.strokeStyle = '#27a'
context.moveTo(100,100)
context.lineTo(100,700)
context.moveTo(700,100)
context.lineTo(700,700)
context.stroke()
}
</script>
</body>
</html>
<!--
lineCap:butt(default) round square 線條兩端的情況
-->
```
通過`context.lineCap = '屬性值'`的語法來定義線條開始處和結尾處的線帽樣式，其可能的取值有`butt（默認值）`、`round`、`square`，分別表示無線帽、圓形線帽、正方形線帽，注意如果有線帽則線條會略長一些，如下圖。
這個多出的長度是這么計算的：
- 如果取值為 round，多出的半圓的直徑為線寬長度
- 如果取值為 square，多出的長方形的長度為線寬的一半，高度保持為線寬長度
## lineJoin 屬性
`lineJoin`屬性用于定義兩個線條交接處的樣式，其有以下可能的取值
| 屬性值 | 說明 |
| --- | --- |
| miter | 默認值，尖角 |
| round | 圓角 |
| bevel | 斜角 |
其區別如下：
- miter：線段在交接處延伸直至交于一點，為默認值
- round：連接處是一個圓角，圓角所在圓的直徑等于線寬長度
- bevel：連接處是一個斜角，斜角所在正方形的對角線長等于線寬長度
## setLineDash() 方法
`setLineDash()`方法用于定義線條的虛實樣式
語法：
```js
context.setLineDash(array)
```
參數 array 是一個數組組合，常見的數組組合有 [10, 5]，[5, 5]，[10, 5, 5, 5]，[2, 2] 等，數組 [10, 5] 表示 “10px 實線” 和 “5px 空白” 重復拼湊而成的線型，而 [10, 5, 5, 5] 表示 “10px 實線、5px 空白、5px 實線、5px 空白” 重復拼湊而成的線型
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
let canvas = document.getElementById('canvas')
canvas.width = 800
canvas.height = 800
let cxt = canvas.getContext('2d')
cxt.strokeStyle = 'red'
cxt.setLineDash([10, 5])
cxt.strokeRect(50, 50, 80, 80)
}
</script>
</body>
</html>
```
