站長資訊網(wǎng)上一章節(jié)我們說到，線性路徑的繪制，主要利用movoTo()，lineTo()等方法，當然 Canvas 2D API 也提供了虛線的繪制方法，CanvasRenderingContext2D.setLineDash();
下面我們就來看看虛線的繪制方法
語法
ctx.setLineDash(segments);
參數(shù) segments：
一個Array數(shù)組。
一組描述交替繪制線段和間距（坐標空間單位）長度的數(shù)字。
如果數(shù)組元素的數(shù)量是奇數(shù)， 數(shù)組的元素會被復制并重復。例如， [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]。
這里最后一句話有可能我們沒有看明白，沒關(guān)系我們繼續(xù)往下看。
我們先繪一條簡單的虛線
function drawDashed(){ cxt.lineWidth = 4; cxt.strokeStyle = 'green'; cxt.beginPath(); cxt.setLineDash([5, 15]); cxt.moveTo(20, 20); cxt.lineTo(400, 20); cxt.stroke(); }
因此繪制虛線也是非常簡單，我們試著改變setLineDash()方法的參數(shù)看看結(jié)果有什么不同
= 4= 'green'50, 60400, 60= 4= 'red'0, 100400, 100
從這個例子我們可以看出當我們的參數(shù)數(shù)組只有一個元素時我們的 “線段與間隔” 是相等的，當參數(shù)數(shù)組的元素為空時，我們繪制的是一條實線。
我們在來看幾個例子
function drawDashed(){ cxt.lineWidth = 4; cxt.strokeStyle = 'blue'; cxt.beginPath(); cxt.setLineDash([20, 5]); cxt.moveTo(20, 40); cxt.lineTo(380, 40); cxt.stroke(); cxt.strokeStyle = 'green'; cxt.beginPath(); cxt.setLineDash([10, 20, 30]); cxt.moveTo(20, 80); cxt.lineTo(380, 80); cxt.stroke(); cxt.strokeStyle = 'red'; cxt.beginPath(); cxt.setLineDash([10, 20, 30, 40]); cxt.moveTo(20, 120); cxt.lineTo(380, 120); cxt.stroke(); }
有上圖幾個例子我們可以看出，setLineDash()方法是根據(jù)參數(shù)中的元素在 “線段與間隔” 之間形成組，然后進行循環(huán)，進而繪制出虛線。
但是第二個例子當中我們傳入的參數(shù)的元素個數(shù)是基數(shù)，看起來和參數(shù)元素為偶數(shù)時有點區(qū)別，它會復制元素并重復，
這就是我們開始所說的 如果參數(shù) segments元素的數(shù)量是奇數(shù)， 數(shù)組的元素會被復制并重復。[10, 20, 30] 會變成 [10, 20, 30, 10, 20, 30]。
getLineDash 方法
有setLineDash的方法去設(shè)置虛線的線段與間距，相應(yīng)的有個方法是獲取虛線的線段和間距的方法。
ctx.getLineDash()
該方法返回一個 Array數(shù)組。一組描述交替繪制線段和間距（坐標空間單位）長度的數(shù)字。如果數(shù)組元素的數(shù)量是奇數(shù)，數(shù)組元素會被復制并重復。 例如， 設(shè)置線段為 [5, 15, 25] 將會得到以下返回值 [5, 15, 25, 5, 15, 25]。
var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d"); ctx.setLineDash([5, 15]);ctx.beginPath(); ctx.moveTo(0,100); ctx.lineTo(400, 100); ctx.stroke();
console.log(ctx.getLineDash()); // [5, 15]
擴展CanvasRenderingContext2D 繪制虛線
我們不僅可以利用 canvas API 繪制虛線，我們還可以擴展一個自己繪制虛線的方法。
擴展思路：
1. 獲取起點坐標
2. 計算虛線的總長度，計算虛線包含多少短線然后循環(huán)繪制
話不多說，我們直接上代碼
var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');var moveToFunction = CanvasRenderingContext2D.prototype.moveTo; CanvasRenderingContext2D.prototype.moveToLocation = {};// 重新定義moveTo方法CanvasRenderingContext2D.prototype.moveTo = function (x, y){this.moveToLocation.x = x;this.moveToLocation.y = y; moveToFunction.apply(this, [x, y]); }; CanvasRenderingContext2D.prototype.dashedLineTo = function(x, y, dashedLength){ dashedLength = dashedLength === undefined ? 5 : dashedLength;var startX = this.moveToLocation.x;var startY = this.moveToLocation.y;var deltaX = x - startX;var deltaY = y - startY;var numberDash = Math.floor(Math.sqrt(deltaX*deltaX + deltaY*deltaY)/dashedLength);for(var i=0; i < numberDash; i++){this[i%2 === 0 ? 'moveTo' : 'lineTo'](startX + (deltaX/numberDash)*i, startY + (deltaY/numberDash)*i); //等同于this.moveTo(x, y)或者 this.LineTo(x, y) }this.moveTo(x, y); //連續(xù)繪制虛線時，起點從當前點開始};//繪制虛線cxt.lineWidth = 3; cxt.strokeStyle = 'green'; cxt.moveTo(20, 20); cxt.dashedLineTo(200, 200); cxt.dashedLineTo(300, 100, 10); cxt.dashedLineTo(400, 300); cxt.stroke();
總結(jié)：
我們可以通過setLineDash()方法繪制虛線，該方法會以參數(shù)的元素個數(shù)為 組 的形式去進行 循環(huán) 繪制，但是要注意傳入方法是參數(shù)的元素個數(shù)。
我們還可以自定義擴展繪制虛線的方法，主要就是獲取起點進而計算線段數(shù)進行循環(huán)繪制
對canvas繪制圖形感興趣的同學，請持續(xù)關(guān)注后續(xù)更新，如有不對的地方也請指出并多多交流。
如需轉(zhuǎn)載，還請注明出處，非常感謝！
