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)