canvas學習總結三:繪制虛線

上一章節我們說到,線性路徑的繪制,主要利用movoTo(),lineTo()等方法,當然 Canvas 2D API 也提供了虛線的繪制方法,CanvasRenderingContext2D.setLineDash();

下面我們就來看看虛線的繪制方法

 

語法

ctx.setLineDash(segments);

 

參數 segments:

一個Array數組。

一組描述交替繪制線段和間距(坐標空間單位)長度的數字。

如果數組元素的數量是奇數, 數組的元素會被復制并重復。例如, [5, 15, 25] 會變成 [5, 15, 25, 5, 15, 25]。

這里最后一句話有可能我們沒有看明白,沒關系我們繼續往下看。

 

我們先繪一條簡單的虛線

 

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()方法的參數看看結果有什么不同

function drawDashed(){
  cxt.lineWidth = 4;
   cxt.strokeStyle = 'green';
   cxt.beginPath();
   cxt.setLineDash([5]);
   cxt.moveTo(0, 60);
   cxt.lineTo(400, 60);
   cxt.stroke();

   cxt.lineWidth = 4;
   cxt.strokeStyle = 'red';
   cxt.beginPath();
   cxt.setLineDash([]);
   cxt.moveTo(0, 100);
   cxt.lineTo(400, 100);
  cxt.stroke();
}

 

 


從這個例子我們可以看出當我們的參數數組只有一個元素時我們的 “線段與間隔” 是相等的,當參數數組的元素為空時,我們繪制的是一條實線。

 

我們在來看幾個例子

 

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()方法是根據參數中的元素在 “線段與間隔” 之間形成組,然后進行循環,進而繪制出虛線。

但是第二個例子當中我們傳入的參數的元素個數是基數,看起來和參數元素為偶數時有點區別,它會復制元素并重復,

這就是我們開始所說的 如果參數 segments元素的數量是奇數, 數組的元素會被復制并重復。[10, 20, 30] 會變成 [10, 20, 30, 10, 20, 30]。

 

getLineDash 方法


有setLineDash的方法去設置虛線的線段與間距,相應的有個方法是獲取虛線的線段和間距的方法。

ctx.getLineDash()

 

 

該方法返回一個 Array數組。一組描述交替繪制線段和間距(坐標空間單位)長度的數字。如果數組元素的數量是奇數,數組元素會被復制并重復。 例如, 設置線段為 [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. 計算虛線的總長度,計算虛線包含多少短線然后循環繪制

話不多說,我們直接上代碼

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); //連續繪制虛線時,起點從當前點開始
};
//繪制虛線
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();

 

 

 

總結:

我們可以通過setLineDash()方法繪制虛線,該方法會以參數的元素個數為 組 的形式去進行 循環 繪制,但是要注意傳入方法是參數的元素個數。

我們還可以自定義擴展繪制虛線的方法,主要就是獲取起點進而計算線段數進行循環繪制

對canvas繪制圖形感興趣的同學,請持續關注后續更新,如有不對的地方也請指出并多多交流。

如需轉載,還請注明出處,非常感謝!


來源:itnose

上一篇: vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack項目實戰系列之二)

下一篇: Vue實戰Vue-cli項目構建(Vue+webpack系列之一)

分享到: 更多
双色球走势图(带连线) pk10走势图技巧 钱生钱最高境界方法 同城游戏手机版下载 北京pk10手机版走势图 广东福彩快乐十分中奖规则 幸运飞艇单吊技巧 北京pk10冠军选号技巧 大乐透走势图带连线图表 第90香港马会36码 重庆时时怎么注册 ig赛车全天计划软件 大乐娱乐lg游戏pt游戏 下载新疆时时开奖结果 香港小霸王www88827 麻将游戏