小編給大家分享一下使用Canvas繪制虛線的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在成都網(wǎng)站制作、做網(wǎng)站中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設置、關鍵詞群組等細微處著手，突出企業(yè)的產(chǎn)品/服務/品牌，幫助企業(yè)鎖定精準用戶，提高在線咨詢和轉(zhuǎn)化，使成都網(wǎng)站營銷成為有效果、有回報的無錫營銷推廣。創(chuàng)新互聯(lián)建站專業(yè)成都網(wǎng)站建設10余年了，客戶滿意度97.8%，歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。
下面我們就來看看虛線的繪制方法
語法
ctx.setLineDash(segments);
參數(shù) segments：
一個Array數(shù)組。
一組描述交替繪制線段和間距（坐標空間單位）長度的數(shù)字。
如果數(shù)組元素的數(shù)量是奇數(shù)， 數(shù)組的元素會被復制并重復。例如， [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]。
這里最后一句話有可能我們沒有看明白，沒關系我們繼續(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的方法去設置虛線的線段與間距，相應的有個方法是獲取虛線的線段和間距的方法。
ctx.getLineDash()
該方法返回一個 Array數(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();
以上是使用Canvas繪制虛線的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
