canvas核心技術-如何繪製線段

這篇是學習和回顧canvas系列筆記的第一篇，完整筆記詳見：canvas核心技術

學習canvas，首先得知道如何去繪製線段，而後才能經過不少簡單的線段去實現比較複雜的圖形，好比常見的圖表，柱狀圖，折線圖等都是經過一段一段的線段實現的。

基礎知識

canvas 的基礎知識不算多，主要掌握如何繪製線段，圖形，圖片，文本等。canvas能夠在瀏覽器中繪製，也能夠藉助 node-canvas在node服務端繪製簡單的圖片。本文只記錄在瀏覽器中繪製，至於在node端如何繪製，本身能夠去查看相關資料。

在瀏覽器中繪製，就先在html中定義canvas元素，默認寬高是300 * 150，能夠經過width和height設置。注意canvas元素樣式寬高和canvas繪圖畫布寬高不是一個東西，詳見知識點5中canvas寬高。

<canvas id="canvas">
  <p>當前瀏覽器不支持canvas，請升級瀏覽器</p>
</canvas>
複製代碼

在繪製以前，咱們要先獲取當前canvas的2d繪製上下文context，後續老是經過操做context來進行繪製。

let canvas = document.querySelector('#canvas');
if (!canvas) {
  throw new Error('can not find canvas element');
}
// 注意2d.參數必須是小寫的；
// 經過設置參數爲webgl，能夠獲取3d繪製上下文
let ctx = canvas.getContext('2d');
複製代碼

注：後續示例中會忽略上面的代碼片斷，直接使用 ctx 變量表示canvas的2d繪製上下文。

再來看看canvas 2d繪製中的座標系統，當前canvas元素左上角爲座標原點(0,0)，水平向右爲X軸正方向，垂直向下爲Y軸正方向，以下圖。能夠經過平移(translate)，旋轉(rotate)，縮放(scale)來操做座標系，實現一些動畫，這部分將在動畫知識部分詳細講解。

線段

在繪製一條簡單的線段時，通常會先設置線段的樣式，好比，顏色，線條寬度，線條端點樣式等，咱們經過設置strokeStyle來設置ctx的全局繪製樣式，能夠是rgba或合法的16進制顏色值，或者漸變對象等。以下代碼簡單的繪製了一條從(10,10)到(50,60)的，寬度爲10的，紅色的線段。

ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.moveTo(10, 10);
ctx.lineTo(50, 60);
ctx.stroke();
複製代碼

先看看與繪製線段相關的方法以及屬性，

相關屬性：

• lineCap，該值告訴瀏覽器如何繪製線段的端點，可選值爲如下三個之一：butt，round，square。默認爲butt。
• lineWidth，該值決定了線段的像素寬度。必須爲非負，非無窮，默認爲1.0。
• lineJoin，決定了兩條線段相交時如何繪製焦點，只有當兩條線段方向不一樣時，纔會生效。可取值：bevel，round，miter。默認值是miter。
• miterLimit，告訴瀏覽器如何繪製miter形式的線段焦點，只有當lineJoin='miter'有效，默認爲10.0。
• lineDashOffset，設置虛線偏移量，默認爲0.0。

相關方法：

• beginPath，將當前路徑之中的全部子路徑都要清除掉，以此來重置當前路徑。通常在繪製閉合圖形時要先調用。
• closePath ,顯示的封閉某段路徑。該方法用於封閉圓弧路徑以及由曲線或線段所建立的開放路徑。
• moveTo，移動當前繪製點到指定的座標。
• lineTo，從上一個點繪製一條到指定座標點的線段。
• setLineDash，用來設置虛線的方法，參數是一個數組，代表繪製實線的長度，以及實線之間的間隙的長度。

試試用設置不一樣的lineCap值來繪製一樣的線段

ctx.lineWidth = 10;
ctx.textAlign = 'center';
let colors = ['red', 'green', 'blue'];
let lineCaps = ['butt', 'round', 'square'];
for (let [index, lc] of lineCaps.entries()) {
  ctx.strokeStyle = colors[index]; //設置線段的顏色
  ctx.lineCap = lc; // 設置lineCap
  ctx.beginPath(); // 清空當前路徑
  ctx.moveTo(10, 20 + 20 * index);
  ctx.lineTo(50, 20 + 20 * index);
  ctx.stroke();
  ctx.fillText(lc, 80, 25 + 20 * index);
}
複製代碼

從上圖結果能夠看出，再將lineCap設置爲round 和square時會在原線段的兩端加上必定長度的端點，只不過round是圓弧樣式，square是矩形樣式。須要注意的一點是，在canvas繪製上下文中同一時刻只能存在一個當前路徑，爲了繪製不一樣的線段，必須在每次繪製以前調用beginPath()來清空當前路線，開始新的路徑。

再來試試用不一樣的lineJoin值來繪製兩個線段焦點處的樣式

ctx.lineWidth = 20;
ctx.textAlign = 'center';
ctx.lineCap = 'butt';
let colors = ['red', 'green', 'blue'];
let lineJoins = ['bevel', 'round', 'miter'];
for (let [index, lj] of lineJoins.entries()) {
  ctx.strokeStyle = colors[index]; //設置線段的顏色
  ctx.lineJoin = lj; //設置lineJoin
  ctx.beginPath(); //清空當前路徑
  ctx.moveTo(10 + 80 * index, 20);
  ctx.lineTo(50 + 80 * index, 20);
  ctx.lineTo(50 + 80 * index, 60);
  ctx.stroke();
  ctx.fillText(lj, 40 + 80 * index, 80);
}
複製代碼

能夠看到，三種lineJoin在處理兩條線段的焦點處的不一樣。其中，在設置lineJoin="miter"時，經過設置miterLimit屬性能夠設置斜接線的長度與二分之一線寬的最大比值，當超過這個比值時，則lineJoin會採用bevel方式。

canvas不只能夠繪製實線，還能夠繪製虛線。繪製虛線，經過設置lineDashOffset屬性和調用setLineDash()方式。

ctx.lineWidth = 10;
ctx.textAlign = 'center';
ctx.setLineDash([8, 8]); //表示實線部分8個像素，間隙部分8個像素
let colors = ['red', 'green', 'blue'];
let lineDashOffsets = [1, 2, 4];
for (let [index, ldOffset] of lineDashOffsets.entries()) {
  ctx.strokeStyle = colors[index]; //線段顏色
  ctx.lineDashOffset = ldOffset; //設置了偏移量
  ctx.beginPath();
  ctx.moveTo(10, 20 + 20 * index);
  ctx.lineTo(100, 20 + 20 * index);
  ctx.stroke();
  ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * index);
}
複製代碼

從圖能夠看到lineDashOffset就是設置的開始繪製虛線的偏移量。setLineDash()方法，接受一個數組參數，若是數組個數是奇數，則會默認把當前數組元素複製一份，使之變成偶數。從第0個元素，表示實線部分長度，第1個元素，表示間隙部分長度，第2個元素，表示實線部分長度，第3個元素，表示間隙部分長度，若是到數組最後一個元素了，又會從頭開始，以此類推。

ctx.lineWidth = 10;
ctx.textAlign = 'center';
let colors = ['red', 'green', 'blue', 'gray'];
let lineDashes = [[20, 20], [40, 40], [20, 40], [20, 40, 20]];
for (let [index, ld] of lineDashes.entries()) {
  ctx.strokeStyle = colors[index]; //設置顏色
  ctx.setLineDash(ld); //設置lineDash
  ctx.beginPath();
  ctx.moveTo(10, 20 + 20 * index);
  ctx.lineTo(171, 20 + 20 * index);
  ctx.stroke();
  ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * index);
}
複製代碼

能夠經過動態設置lineDashOffset來實現蟻線，好比選擇PS中選區邊緣的蟻線。

let lineDashOffset = 0; //初始lineDashOffset
ctx.strokeStyle = 'green';
function animate() {
  if (lineDashOffset > 25) {
    lineDashOffset = 0;
  }
  ctx.clearRect(0, 0, width, height); //清空當前canvas
  ctx.lineDashOffset = -lineDashOffset; //設置lineDashOffset
  ctx.setLineDash([4, 4]); // 設置實線長度和間隙長度
  ctx.rect(20, 20, 100, 100); //繪製一個矩形
  ctx.stroke(); //對canvas當前路徑描邊
  lineDashOffset += 1; //lineDashOffset偏移加1
  window.requestAnimationFrame(animate); //用瀏覽器幀速率來反覆執行animate函數
}
animate();
複製代碼

小結

繪製線段時，要理解canvas當前路徑概念，某一時刻，canvas中當前路徑只有一條，在開始新的路徑時，必須調用beginPath()。能夠經過設置lineWidth，lineCap，lineJoin設置線段的繪製樣式。在描邊線段時，能夠經過strokeStyle來設置線段的顏色。

canvas中不只能夠繪製實線，還能夠經過lineDashOffset和setLineDash()來繪製虛線。