HTML5 畫布中的直線 · ZetCode 中文系列教程

# HTML5 畫布中的直線 > 原文： [https://zetcode.com/gfx/html5canvas/lines/](https://zetcode.com/gfx/html5canvas/lines/) 線是簡單的圖形基元。線是連接兩個點的對象。在 HTML5 畫布中，使用`path`對象創建一行。路徑是由線段連接的點的列表，這些線段可以具有不同的形狀（彎曲或不彎曲），不同的寬度和不同的顏色。在路徑對象內，使用`lineTo()`方法創建一條線。 ## 直線下面的示例繪制兩條線。 `lines.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas lines</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(250, 150); ctx.stroke(); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(250, 250); ctx.lineWidth = 5; ctx.stroke(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="350"> </canvas> </body> </html> ``` 畫了兩條線。第二行較粗。 ```js ctx.beginPath(); ``` `beginPath()`方法創建一個新路徑。創建后，隨后的繪圖命令將直接進入路徑并用于構建路徑。 ```js ctx.moveTo(20, 20); ``` `moveTo()`方法將筆移動到 x 和 y 指定的坐標。 ```js ctx.lineTo(250, 150); ``` `lineTo()`方法從當前繪制位置到 x 和 y 指定的位置繪制一條線。 ```js ctx.stroke(); ``` `stroke()`方法通過描邊輪廓繪制線條。 ```js ctx.lineWidth = 5; ``` `lineWidth`設置第二行的寬度；線較粗。 ![Lines](https://img.kancloud.cn/d3/13/d313e33656fceb3b6cc4146b99381e5d_401x393.jpg) 圖：直線 ## 模糊直線具有奇數寬度的線似乎模糊。這是因為這些線是在畫布的網格線之間繪制的。有一個快速的解決方案-將坐標移動半個單位。 `crisp_lines.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas crisp lines</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 1 ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(250, 20); ctx.stroke(); ctx.beginPath(); ctx.moveTo(20, 40); ctx.lineTo(250, 40); ctx.stroke(); ctx.translate(0.5, 0.5); ctx.beginPath(); ctx.moveTo(20, 60); ctx.lineTo(250, 60); ctx.stroke(); ctx.beginPath(); ctx.moveTo(20, 80); ctx.lineTo(250, 80); ctx.stroke(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="350"> </canvas> </body> </html> ``` 該示例繪制了四行。前兩個略微模糊，其他兩個更平滑。 ```js ctx.lineWidth = 1 ``` 我們有一條寬度奇數的線。 ```js ctx.translate(0.5, 0.5); ``` 這是消除線條模糊的快速解決方案。 `translate()`方法將坐標系移動半個單位。 ![Crisp lines](https://img.kancloud.cn/35/6e/356ec4867e87335c6eac530ae45364aa_379x233.jpg) 圖：酥脆的線 ## 筆劃線可以使用各種筆劃線來繪制線。筆劃線是通過混合不透明部分和透明部分而創建的圖案。使用畫布上下文的`setLineDash()`方法指定筆劃線。 `line_dashes.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas line dashes</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.translate(0.5, 0.5); ctx.beginPath(); ctx.setLineDash([2]); ctx.moveTo(10, 10); ctx.lineTo(250, 10); ctx.stroke(); ctx.beginPath(); ctx.setLineDash([7, 2]); ctx.moveTo(10, 20); ctx.lineTo(250, 20); ctx.stroke(); ctx.beginPath(); ctx.setLineDash([4, 4, 1]); ctx.moveTo(10, 30); ctx.lineTo(250, 30); ctx.stroke(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="250"> </canvas> </body> </html> ``` 該示例繪制了三條具有不同筆劃線圖案的線。 ```js ctx.setLineDash([2]); ``` 這條線將交替顯示 2 個坐標單位的不透明和透明部分。 ```js ctx.setLineDash([4, 4, 1]); ``` 在這里，筆劃線由以下模式組成：4 個單位已繪制，4 個未繪制單位，1 個已繪制單位。 ![Line dashes](https://img.kancloud.cn/fd/68/fd68da1b57938f4e44bfc58c92bee839_380x173.jpg) 圖：虛線 ## 端蓋端蓋是應用于未封閉子路徑和破折線段末端的裝飾。 Java 2D 中有三種不同的端蓋：`'square'`，`'round'`和`'butt'`。 * `'butt'` - 結束未封閉的子路徑和虛線段，不添加任何修飾。 * `'round'` - 用圓形裝飾結束未封閉的子路徑和虛線段，該圓形裝飾的半徑等于筆的寬度的一半。 * `'square'` - 以方形投影結束未封閉的子路徑和虛線段，該方形投影超出段的末端并延伸到等于線寬一半的距離。 `line_caps.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas line caps</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.translate(0.5, 0.5); ctx.lineWidth = 8; ctx.beginPath(); ctx.lineCap = 'square'; ctx.moveTo(10, 10); ctx.lineTo(250, 10); ctx.stroke(); ctx.beginPath(); ctx.lineCap = 'round'; ctx.moveTo(10, 30); ctx.lineTo(250, 30); ctx.stroke(); ctx.beginPath(); ctx.lineCap = 'butt'; ctx.moveTo(10, 50); ctx.lineTo(250, 50); ctx.stroke(); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 0); ctx.lineTo(10, 60); ctx.stroke(); ctx.beginPath(); ctx.moveTo(250, 0); ctx.lineTo(250, 60); ctx.stroke(); ctx.beginPath(); ctx.moveTo(254, 0); ctx.lineTo(254, 60); ctx.stroke(); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="250"> </canvas> </body> </html> ``` 在我們的示例中，我們顯示了所有三種類型的端蓋。 ```js ctx.lineWidth = 8; ``` 我們增加線條的寬度，以便更好地看到蓋帽。 ```js ctx.lineCap = 'square'; ``` 線寬由`lineCap`上下文屬性指定。 ![Line caps](https://img.kancloud.cn/da/6a/da6a5503d0435d8cd85d08f2dc235b3a_458x209.jpg) 圖：直線的端帽垂直線強調線的大小差異。 ## 連接線連接是應用于兩個路徑段的交點以及子路徑端點的交點的修飾。一共有三種裝飾：`'bevel'`，`'miter'`和`'round'`。 * `'bevel'` - 通過將寬輪廓的外角與直線段相連來連接路徑段。 * `'miter'` - 通過擴展路徑段的外部邊緣直到它們交匯來連接路徑段。 * `'round'` - 通過以線寬一半的半徑四舍五入拐角來連接路徑段。 `line_joins.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas line joins</title> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.translate(0.5, 0.5); ctx.lineWidth = 8; ctx.lineJoin = 'miter'; ctx.strokeRect(10, 10, 100, 100); ctx.lineJoin = 'bevel'; ctx.strokeRect(130, 10, 100, 100); ctx.lineJoin = 'round'; ctx.strokeRect(260, 10, 100, 100); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="450" height="350"> </canvas> </body> </html> ``` 此代碼示例顯示了三個不同的線聯接在起作用。 ```js ctx.lineWidth = 8; ``` 用細線很難分辨連接類型之間的區別。因此，通過將`lineWidth`設置為 8 個單位，可以使線條更粗。 ```js ctx.lineJoin = 'miter'; ``` 線連接使用`lineJoin`屬性設置。 ![Joins](https://img.kancloud.cn/96/80/9680e9a354c6f19abf8f2924d859beab_497x289.jpg) 圖：`Joins` ## 貝塞爾曲線貝塞爾曲線是由數學公式定義的曲線（樣條線）。繪制曲線的數學方法由 PierreBézier 在 1960 年代后期創建，用于雷諾的汽車制造。畫布上下文的`bezierCurveTo()`方法將三次貝塞爾曲線添加到路徑。它需要三個點：前兩個點是控制點，第三個點是終點。起點是當前路徑中的最后一個點，可以在創建貝塞爾曲線之前使用`moveTo()`對其進行更改。通過移動控制點來修改形狀。 `bezier_curve.html` ```js <!DOCTYPE html> <html> <head> <title>HTML5 canvas Bézier curve</title> <meta charset="utf-8"> <script> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(20, 60); ctx.bezierCurveTo(80, 20, 180, 160, 250, 50); ctx.stroke(); ctx.fillStyle = 'cadetblue'; ctx.fillRect(80, 20, 4, 4); ctx.fillRect(180, 160, 4, 4); } </script> </head> <body onload="draw();"> <canvas id="myCanvas" width="350" height="350"> </canvas> </body> </html> ``` 該示例繪制了一條貝塞爾曲線。 ```js ctx.moveTo(20, 60); ``` 通過`moveTo()`方法，我們定義了曲線的起點。 ```js ctx.bezierCurveTo(80, 20, 180, 160, 250, 50); ``` 使用`bezierCurveTo()`方法，我們在路徑上添加了貝塞爾曲線。前兩個點是控制點；最后一點是曲線的終點。 ```js ctx.fillStyle = 'cadetblue'; ctx.fillRect(80, 20, 4, 4); ctx.fillRect(180, 160, 4, 4); ``` 這些線繪制曲線的控制點。 ![Bézier curve](https://img.kancloud.cn/a4/17/a4170337976472633d0a9492fc472437_432x292.jpg) 圖：貝塞爾曲線在 HTML5 畫布教程的這一部分中，我們使用了線條。