直線案例 · 前端速查手冊

[TOC] >[success] # 常用的屬性 ~~~ 1.畫筆起始位置 ctx.moveTo(100,200) 2.畫直線定位點 ctx.lineTo(200,200) 3.描邊顯示直線 ctx.stroke() 4.設置線條顏色 ctx.strokeStyle=“blue” 5.設置線條粗細 ctx.lineWidth = 10; 6.設置每一個線條獨立 ctx.beginPath() 7.填充內部顏色 ctx.fill(); 8.設置填充顏色 ctx.fillStyle = 'red'; 9.自動閉合線條 ctx.closePath() 10.填充色的順時逆時針效果 11.線條端點效果 ctx.lineCap = butt/square/round 12.線條折線點效果 ctx.lineJoin = 'miter'/'bevel'/'round' 13.繪制虛線 ctx.setLineDash([20]); ~~~ >[success] # 繪制平行線 ~~~ 1.默認的寬度是多少 1px 2.默認的顏色是什么黑色 3.產生原因：對齊的點是線的中心位置會把線分成兩個0.5px 顯示的是會不飽和增加寬度解決方案前后移動0.5px ~~~ >[danger] ##### 案例 ![](https://box.kancloud.cn/2ddea8eea8a3872768ce9c9c645bf23d_600x296.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border:1px solid #cccccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas') var ctx = myCanvas.getContext('2d'); // 實際根據調整的顯示效果 ctx.moveTo(100,100.5) ctx.lineTo(200,100.5) //沒有經過調整的顯示效果 ctx.moveTo(100,200) ctx.lineTo(200,200) ctx.stroke() </script> </body> </html> ~~~ >[success] # 帶有顏色的三條平行線 ~~~ 1.首先聲明 ctx.beginPath() 為了告訴三條線相互沒有關系，各自描邊，不聲明代碼自上而下最后的會覆蓋所有樣式 2.設置線條顏色 ctx.strokeStyle=“blue” 3.設置線條寬度 ctx.lineWidth = 10; 4.關閉但前線條用描邊 ctx.stroke(); ~~~ >[danger] ##### 案例 ![](https://box.kancloud.cn/9e406e4221e533cc5093e9ae55d9084b_604x400.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*畫平行線*/ ctx.beginPath();/*Kai*/ /*藍色 10px*/ ctx.moveTo(100,100); ctx.lineTo(300,100); ctx.strokeStyle = 'blue'; ctx.lineWidth = 10; /*描邊*/ ctx.stroke(); /*紅色 20px*/ ctx.beginPath();/*Kai*/ ctx.moveTo(100,200); ctx.lineTo(300,200); ctx.strokeStyle = 'red'; ctx.lineWidth = 20; /*描邊*/ ctx.stroke(); /*綠色 30px*/ ctx.beginPath();/*Kai*/ ctx.moveTo(100,300); ctx.lineTo(300,300); ctx.strokeStyle = 'green'; ctx.lineWidth = 30; /*描邊*/ ctx.stroke(); </script> </body> </html> ~~~ >[success] # 繪制三角形 * 第一個描述產生的問題 ![](https://box.kancloud.cn/022a9d3c21a63e714796d8bd475a0133_285x194.png) ~~~ 1. 用ctx.lineTo定義三個點坐標，不好的地方是，最后一個點用lineTo和起始點moveTo重合的地方會產生缺口 2. 解決缺口問題自動閉合使用 ctx.closePath(); 3. 填充顏色使用ctx.fill(); 4. 設置填充顏色默認黑色 ctx.fillStyle = 'red'; ~~~ >[danger] ##### 案例 ![](https://box.kancloud.cn/09b03f39272e520c4feb0ee85be771da_262x218.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.繪制一個三角形*/ ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); /*起始點和lineTo的結束點無法完全閉合缺角*/ /*使用canvas的自動閉合 */ // ctx.lineTo(100,100); /*關閉路徑*/ ctx.closePath(); ctx.lineWidth = 10; /*2.描邊*/ ctx.stroke(); /*3.填充*/ //ctx.fill(); </script> </body> </html> ~~~ >[success] # 填充色 ![](https://box.kancloud.cn/ff10941d70fa12c839001669bf84d42d_741x333.png) >[danger] ##### 案例 ![](https://box.kancloud.cn/5be22b12dad2d3ab7350845dde095bbe_429x403.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border:1px solid #cccccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas') var ctx = myCanvas.getContext('2d'); /*1.繪制兩個正方形一大200一小100 套在一起*/ // 順時針 ctx.moveTo(100,100); ctx.lineTo(300,100); ctx.lineTo(300,300); ctx.lineTo(100,300); ctx.closePath(); // 逆時針 ctx.moveTo(150,150); ctx.lineTo(150,250); ctx.lineTo(250,250); ctx.lineTo(250,150); ctx.closePath(); /*2.去填充*/ //ctx.stroke(); ctx.fillStyle = 'red'; ctx.fill(); </script> </body> </html> ~~~ >[success] # 線條兩端樣式/拐點效果 ~~~ 1.設置線兩端的ctx.lineCap = butt/square/round 默認無樣式/添加一個矩形樣式帽子/半圓樣式帽子 2.設置折線ctx.lineJoin = 'miter'/'bevel'/'round' 默認無樣式/平頭樣式/半圓樣式 ~~~ >[danger] ##### 案例 ![](https://box.kancloud.cn/7beddf8027a99e82045516f57dbbd395_545x392.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*畫平行線*/ ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(200,20); ctx.lineTo(300,100); ctx.strokeStyle = 'blue'; ctx.lineWidth = 10; ctx.lineCap = 'butt'; ctx.lineJoin = 'miter'; ctx.stroke(); ctx.beginPath(); ctx.moveTo(100,200); ctx.lineTo(200,120); ctx.lineTo(300,200); ctx.strokeStyle = 'red'; ctx.lineWidth = 20; ctx.lineCap = 'square'; ctx.lineJoin = 'bevel'; ctx.stroke(); ctx.beginPath(); ctx.moveTo(100,300); ctx.lineTo(200,220); ctx.lineTo(300,300); ctx.strokeStyle = 'green'; ctx.lineWidth = 30; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke(); </script> </body> </html> ~~~ >[success] # 繪制虛線 ![](https://box.kancloud.cn/7ba4a3b00ffa3fae73eb5cac1fbd44dc_428x148.png) >[danger] ##### 案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*畫線*/ ctx.moveTo(100,100.5); ctx.lineTo(300,100.5); /*[5,10] 數組是用來描述你的排列方式的*/ ctx.setLineDash([20]); /*獲取虛線的排列方式獲取的是不重復的那一段的排列方式*/ console.log(ctx.getLineDash()); /*如果是正的值往后偏移*/ /*如果是負的值往前偏移*/ ctx.lineDashOffset = -20; ctx.stroke(); </script> </body> </html> ~~~