Part3-線條操作 · 前端小冊

# 線條操作 | 屬性 | 說明 | | --- | --- | | 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>  ``` 通過`context.lineCap = '屬性值'`的語法來定義線條開始處和結尾處的線帽樣式，其可能的取值有`butt（默認值）`、`round`、`square`，分別表示無線帽、圓形線帽、正方形線帽，注意如果有線帽則線條會略長一些，如下圖。 ![](https://img.kancloud.cn/e7/6d/e76dfa32ad9d9c7d009ce6bc1bbb0854_782x771.png =400x) 這個多出的長度是這么計算的： - 如果取值為 round，多出的半圓的直徑為線寬長度 - 如果取值為 square，多出的長方形的長度為線寬的一半，高度保持為線寬長度 ## lineJoin 屬性 `lineJoin`屬性用于定義兩個線條交接處的樣式，其有以下可能的取值 | 屬性值 | 說明 | | --- | --- | | miter | 默認值，尖角 | | round | 圓角 | | bevel | 斜角 | 其區別如下： - miter：線段在交接處延伸直至交于一點，為默認值 - round：連接處是一個圓角，圓角所在圓的直徑等于線寬長度 - bevel：連接處是一個斜角，斜角所在正方形的對角線長等于線寬長度 ![](https://img.kancloud.cn/e7/14/e714460dfdd9460527141467c8814644_271x350.png =200x) ## 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> ``` ![](https://img.kancloud.cn/47/6f/476f344a0fd7ca41f7a88068851a57fa_141x137.png)