學習canvas，首先得知道如何去繪製線段，然後才能通過很多簡單的線段去實現比較複雜的圖形，比如常見的圖表，柱狀圖，折線圖等都是通過一段一段的線段實現的。
基礎知識canvas 的基礎知識不算多，主要掌握如何繪製線段，圖形，圖片，文字等。 canvas可以在瀏覽器中繪製，也可以使用node-canvas在node服務端繪製簡單的圖片。本文只記錄在瀏覽器中繪製，至於node端如何繪製，自己可以去查看相關資料。
在瀏覽器中繪製，就先在html中定義canvas元素，預設寬高是300 * 150，可以透過width和height設定。注意canvas元素樣式寬高和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值來繪製同樣的線段
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);} let lineDashOffset = 0; //初始lineDashOffsetctx.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()來繪製虛線。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。