站長(zhǎng)資訊網(wǎng)上一章節(jié)我們說到，線性路徑的繪制，主要利用movoTo()，lineTo()等方法，當(dāng)然 Canvas 2D API 也提供了虛線的繪制方法，CanvasRenderingContext2D.setLineDash();
下面我們就來看看虛線的繪制方法
語(yǔ)法
ctx.setLineDash(segments);
參數(shù) segments：
一個(gè)Array數(shù)組。
一組描述交替繪制線段和間距（坐標(biāo)空間單位）長(zhǎng)度的數(shù)字。
如果數(shù)組元素的數(shù)量是奇數(shù)， 數(shù)組的元素會(huì)被復(fù)制并重復(fù)。例如， [5, 15, 25] 會(huì)變成 [5, 15, 25, 5, 15, 25]。
這里最后一句話有可能我們沒有看明白，沒關(guān)系我們繼續(xù)往下看。
我們先繪一條簡(jiǎn)單的虛線
function drawDashed(){ cxt.lineWidth = 4; cxt.strokeStyle = 'green'; cxt.beginPath(); cxt.setLineDash([5, 15]); cxt.moveTo(20, 20); cxt.lineTo(400, 20); cxt.stroke(); }
因此繪制虛線也是非常簡(jiǎn)單，我們?cè)囍淖僺etLineDash()方法的參數(shù)看看結(jié)果有什么不同
= 4= 'green'50, 60400, 60= 4= 'red'0, 100400, 100
從這個(gè)例子我們可以看出當(dāng)我們的參數(shù)數(shù)組只有一個(gè)元素時(shí)我們的 “線段與間隔” 是相等的，當(dāng)參數(shù)數(shù)組的元素為空時(shí)，我們繪制的是一條實(shí)線。
我們?cè)趤砜磶讉€(gè)例子
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(); }
有上圖幾個(gè)例子我們可以看出，setLineDash()方法是根據(jù)參數(shù)中的元素在 “線段與間隔” 之間形成組，然后進(jìn)行循環(huán)，進(jìn)而繪制出虛線。
但是第二個(gè)例子當(dāng)中我們傳入的參數(shù)的元素個(gè)數(shù)是基數(shù)，看起來和參數(shù)元素為偶數(shù)時(shí)有點(diǎn)區(qū)別，它會(huì)復(fù)制元素并重復(fù)，
這就是我們開始所說的 如果參數(shù) segments元素的數(shù)量是奇數(shù)， 數(shù)組的元素會(huì)被復(fù)制并重復(fù)。[10, 20, 30] 會(huì)變成 [10, 20, 30, 10, 20, 30]。
getLineDash 方法
有setLineDash的方法去設(shè)置虛線的線段與間距，相應(yīng)的有個(gè)方法是獲取虛線的線段和間距的方法。
ctx.getLineDash()
該方法返回一個(gè) Array數(shù)組。一組描述交替繪制線段和間距（坐標(biāo)空間單位）長(zhǎng)度的數(shù)字。如果數(shù)組元素的數(shù)量是奇數(shù)，數(shù)組元素會(huì)被復(fù)制并重復(fù)。 例如， 設(shè)置線段為 [5, 15, 25] 將會(huì)得到以下返回值 [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]
擴(kuò)展CanvasRenderingContext2D 繪制虛線
我們不僅可以利用 canvas API 繪制虛線，我們還可以擴(kuò)展一個(gè)自己繪制虛線的方法。
擴(kuò)展思路：
1. 獲取起點(diǎn)坐標(biāo)
2. 計(jì)算虛線的總長(zhǎng)度，計(jì)算虛線包含多少短線然后循環(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ù)繪制虛線時(shí)，起點(diǎn)從當(dāng)前點(diǎn)開始};//繪制虛線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()方法繪制虛線，該方法會(huì)以參數(shù)的元素個(gè)數(shù)為 組 的形式去進(jìn)行 循環(huán) 繪制，但是要注意傳入方法是參數(shù)的元素個(gè)數(shù)。
我們還可以自定義擴(kuò)展繪制虛線的方法，主要就是獲取起點(diǎn)進(jìn)而計(jì)算線段數(shù)進(jìn)行循環(huán)繪制
對(duì)canvas繪制圖形感興趣的同學(xué)，請(qǐng)持續(xù)關(guān)注后續(xù)更新，如有不對(duì)的地方也請(qǐng)指出并多多交流。
如需轉(zhuǎn)載，還請(qǐng)注明出處，非常感謝！
