使用Canvas繪制虛線的方法

發(fā)布時(shí)間：2020-09-23 14:08:21 來(lái)源：億速云閱讀：622 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下使用Canvas繪制虛線的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

下面我們就來(lái)看看虛線的繪制方法

語(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]。

這里最后一句話有可能我們沒(méi)有看明白，沒(méi)關(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

使用Canvas繪制虛線的方法

從這個(gè)例子我們可以看出當(dāng)我們的參數(shù)數(shù)組只有一個(gè)元素時(shí)我們的 “線段與間隔” 是相等的，當(dāng)參數(shù)數(shù)組的元素為空時(shí)，我們繪制的是一條實(shí)線。

我們?cè)趤?lái)看幾個(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();
}

使用Canvas繪制虛線的方法

有上圖幾個(gè)例子我們可以看出，setLineDash()方法是根據(jù)參數(shù)中的元素在 “線段與間隔” 之間形成組，然后進(jìn)行循環(huán)，進(jìn)而繪制出虛線。

但是第二個(gè)例子當(dāng)中我們傳入的參數(shù)的元素個(gè)數(shù)是基數(shù)，看起來(lái)和參數(shù)元素為偶數(shù)時(shí)有點(diǎn)區(qū)別，它會(huì)復(fù)制元素并重復(fù)，

這就是我們開(kāi)始所說(shuō)的如果參數(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)繪制

話不多說(shuō)，我們直接上代碼

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)開(kāi)始};//繪制虛線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繪制虛線的方法

以上是使用Canvas繪制虛線的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

使用Canvas繪制虛線的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽