上一節中，使用moveTo()、lineTo()和stroke()可以很輕易的在Canvas中繪製出實線（線段）。整篇文章中看到的都是繪製實現。不知道你和我是不是一樣的好奇，那麼要在Canvas中繪製虛線和圓點線又要怎麼繪製，在Canvas有沒有類似的API能直接繪製呢？

其實我也很好奇，看了一些資料，要像繪製實線那樣簡單或者直接，相對來說是沒有的，但不用擔心，通過其他的方法也是可以實現的。因為JavaScript是一門萬能的語言，那麼接下來的內容，就來看看如何在Canvas中繪製虛線和圓點線。

繪製虛線

CanvasRenderingContext2D.setLineDash() 是 Canvas 2D API 設定虛線樣式的方法。

使用方式很簡單：

ctx.setLineDash(segments);

其接受一個引數segments，這個引數是一個Array陣列。一組描述交替繪製線段和間距（座標空間單位）長度的數字。如果陣列元素的數量是奇數，陣列的元素會被複制並重復。例如，[5,15,25]會變成[5,15,25,5,15,25]。

言外之意，在Canvas中，可以使用setLineDash方法來繪製虛線。既然有這樣的方法，那還等什麼呢？動手吧。

function drawScreen() {

    ctx.setLineDash([5,15]);
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#f36'
 
;

    ctx.beginPath();
    ctx.moveTo(10, 100);
    ctx.lineTo(400, 100);
    ctx.stroke();
}

咱們來改變一下setLineDash()裡面的值：

ctx.setLineDash([25,5]);

效果變成：

將上圖放大來看：

上圖是setLineDash([25,5])的效果，第一個虛線點是25個畫素，第二個空白點是5個畫素。然後按這樣的組合在不斷的迴圈，直到線段的終點。那麼如果，我們把上面的示例再做一下調整：

function drawScreen() {

    ctx.lineWidth = 4
 
;

    ctx.beginPath();
    ctx.setLineDash([40,30,20]);
    ctx.strokeStyle = '#f36';
    ctx.moveTo(10, 100);
    ctx.lineTo(400, 100);
    ctx.stroke();

    ctx.beginPath();
    ctx.setLineDash([40,30,20,10]);
    ctx.strokeStyle = 'blue';
    ctx.moveTo(10, 120);
    ctx.lineTo(400, 120);
    ctx.stroke();
}

同樣我們把它們放大來看，這樣好理解一點：

上圖應該解釋清楚了吧。簡單的理解setLineDash([])值，“線|間距”，不斷的迴圈。如此一來，在繪製虛線時，就需要注意他們的迴圈次數，以及你需要的虛線格式，不然說不定繪製出來的虛線，並不是你所需要的喲。

其實如果你想線和間距一樣大小，最簡單的方法，就是隻給setLineDash()傳一個值：

ctx.setLineDash([10]);

上面實現了，我們所說的虛線，也就是CSS中的dashed。除此之外，還有圓點線（dotted）。接下來就來看，怎麼在Canvas中繪製圓點線。

繪製圓點線

查了一下，在Canvas中沒有直接繪製圓點(dotted)線的API。也就是說，如果要繪製這樣的線段（路徑）需要特殊處理。也就是說，需要通過JavaScript另外封裝一個API。比如封裝一個CanvasRenderingContext2D.dottedLine，然後通過context.dottedLine繪製。接下來，看看如何封裝這個API：

var canvasPrototype = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
canvasPrototype.dottedLine = function (x1,y1, x2, y2, interval) {
    if (!interval) {
        interval = 5;
    }

    var isHorizontal = true;

    if (x1 == x2) {
        isHorizontal = false;
    }

    var len = isHorizontal ? x2 - x1 : y2 - y1;

    this.moveTo(x1, y1);

    var progress = 0;

    while (len > progress) {
        progress += interval;

        if (progress > len) {
            progress = len;
        }

        if (isHorizontal) {
            this.moveTo(x1 + progress, y1);
            this.arc(x1 + progress, y1, 1, 0, Math.PI * 2, true);
            this.fill();
        } else {
            this.moveTo(x1, y1 + progress);
            this.arc(x1, y1 + progress, 1, 0, Math.PI * 2, true);
            this.fill();
        }
    }
}

在Canvas畫布中，通過下面的方式就可以繪製圓點線：

context.dottedLine(10, 100, 200, 200);

當x1和x2的值相等時，可以繪製豎線：

context.dottedLine(10, 100, 10, 200);

同時我們也可以改變間距值：

context.dottedLine(10, 100, 200, 200, 10);

使用類似的方法，我們就可以繪製一個圓點線的距形：

context.dottedLine(10, 100, 200, 200, 10);
context.dottedLine(10, 100, 10, 200, 10);
context.dottedLine(200, 100, 200, 200, 10);
context.dottedLine(10, 200, 200, 200, 10);

效果如下：

這樣一來是不是也很簡單。其實除了封裝成Canvas的API之外，我們是不是也可以將其封裝成一個函式呢？思考一下？

總結

這篇文章主要使用setLineDash()繪製虛線（dashed），這是Canvas裡提供的API。但在Canvas中沒有類似的API，可以直接讓我們繪製圓點劃線。不過這不是什麼大問題，可以利用JavaScript封裝一個類似 setLineDash()的API dottedLine來繪製圓點劃線。當然也可以將其封裝成一個JavaScript。

在這篇文章中，我們看到的是在Canvask 繪製虛線和圓點劃線，那麼我們思考一下，在Canvas中怎麼繪製對角線。

個人建了前端學習群，旨在一起學習前端。純淨、純粹技術討論，非前端人員勿擾！入群加我微信：iamaixiaoxiao。