Canvas繪制圓點線段

最近一個小夥遇到一個需求，客戶需要繪制圓點樣式的線條。大緻效果是這樣的：

思路一：計算并使用arc填充

他自己實作了一種思路，然後咨詢我有沒有更好的思路。先看看他的思路是如何實作的，大緻代碼如下：

// 繪制圓點線，通過計算線上條上進行插值運算，計算出需要繪制圓點的一系列點位
// 然後調用drawDot方法繪制圓點
 function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
      var dx=x2-x1;
      var dy=y2-y1;
      var spaceX=dx/(dotCount-1);
      var spaceY=dy/(dotCount-1);
      var newX=x1;
      var newY=y1;
      for (var i=0;i<dotCount;i++){
              drawDot(newX,newY,dotRadius,dotColor);
              newX+=spaceX;
              newY+=spaceY;              
       }
       drawDot(x1,y1,3,"red");
       drawDot(x2,y2,3,"red");
    }

// 繪制圓點
    function drawDot(x,y,dotRadius,dotColor){
        ctx.beginPath();
        ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
        ctx.fillStyle = dotColor;
        ctx.fill();              
    }

通過上面的簡單的示意代碼可以看出，繪制邏輯是通過計算直線之間的點位，然後再相應的點上面繪制圓形。

該方法最終可以達到效果，可是有如下問題：

存在性能問題
如果是貝塞爾曲線曲線，可能會涉及到複雜的運作。貝塞爾曲線的相關知識，可以參考下文進行了解：

深入了解貝塞爾曲線

當然此思路在繪制一些更加複雜的效果的時候，可能會有用。比如沿線繪制五角星，其他任意形狀或者圖檔等等。或者要繪制的是圓圈而不是填充的圓形的效果，也需要使用此方法。

但是如果隻是繪制圓點線，我們可以使用更加簡便的方法，主要思路就是使用setLineDash方法+lineCap設定

思路二 setLineDash方法+lineCap設定

lineCap介紹

CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何繪制每一條線段末端的屬性。有3個可能的值，分别是：butt, round and square。預設值是 butt。

使用時，直接指派即可:

ctx.lineCap = "butt";
ctx.lineCap = "round";
ctx.lineCap = "square";

下面從左到右分别是butt, round ，square的效果：

可以看出 “round”和“square”都是在原本繪制得線段之外擴充了一個半圓和一個矩形，這點在後面會用到。

相關知識，可以參考這篇文章：

canvas基礎知識回顧

setLineDash介紹

Canvas 2D API的

CanvasRenderingContext2D

接口的

setLineDash()

方法在填充線時使用虛線模式。它使用一組值來指定描述模式的線和間隙的交替長度。

文法如下:

ctx.setLineDash(segments);
//segments數組。一組描述交替繪制線段和間距（坐标空間機關）長
//度的數字。 如果數組元素的數量是奇數， 數組的元素會被複制并重
//複。例如， `[5, 15, 25]` 會變成 `[5, 15, 25, 5, 15, 25]。`</dd>

繪制圓點線原理

有了上面兩個知識點，隻需要把兩者結合起來，就可以繪制出圓點線，我們首先使用ctx.setLineDash方法把線段分成一段一段得虛線。然後把lineCap設定為“round”，我們就會得到一段一段得端點是半圓得小線段，代碼如下：

ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.lineCap = "round"
        ctx.setLineDash([10, 30]);
        ctx.moveTo(0, 50);
        ctx.lineTo(300, 50);
        ctx.lineTo(300, 200);
        ctx.quadraticCurveTo(500,300,400,400);
        ctx.stroke();

最終繪制得效果如下圖所示：

到此，又朋友可能有疑問，這個也不是圓點線得效果。其實隻需要把上面得代碼稍微得修改，讓實線線段本身得長度變成0即可，修改代碼：

...
ctx.setLineDash([0, 30]);
...

最終繪制得效果如下圖所示：

結合前面 lineCap 得知識點，相信很容易了解。

如果要繪制方塊得效果，也是很容易得，隻需要把lineCap 改成"square" 即可：

ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.lineCap = "square"
        ctx.setLineDash([0, 30]);
        ctx.moveTo(0, 50);
        ctx.lineTo(300, 50);
        ctx.lineTo(300, 200);
        ctx.quadraticCurveTo(500,300,400,400);
        ctx.stroke();

效果如下：

此處有人可能會說，lineCap 為“butt”同樣可以做出方塊得效果，隻需要調整setLineDash得參數即可:

ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.lineCap = "butt"
        ctx.setLineDash([10, 30]);
        ctx.moveTo(0, 50);
        ctx.lineTo(300, 50);
        ctx.lineTo(300, 200);
        ctx.quadraticCurveTo(500,300,400,400);
        ctx.stroke();

确實如此，但是使用“square” 得情況下setLineDash函數的參數的一個值始終是0，而“butt” 的情況下，setLineDash函數的參數的第一個參數值需要随着lineWidth變化而變化，很不友善，而且“butt”的情況下，還會出現尾部可能不是一個方塊的效果，如下圖：

擴充

如果要繪制如下得線條樣式，應該怎麼做呢：

其實也很簡單，就是把同一條線段用不同得lineDash和lineCap繪制兩次即可，代碼如下：

// 繪制圓點
    ctx.save();
    ctx.beginPath();
    ctx.lineCap = "round";
    ctx.setLineDash([0, 80]);
    ctx.lineWidth = 20;
    ctx.moveTo(50, 50);
    ctx.lineTo(400, 50);
    ctx.lineTo(400, 400);
    ctx.quadraticCurveTo(750, 450, 800, 800);
    ctx.stroke();
    //繪制直線
    ctx.lineCap = "butt";
    ctx.setLineDash([0, 20, 40, 20]);
    ctx.lineWidth = 10;
    ctx.moveTo(50, 50);
    ctx.lineTo(400, 50);
    ctx.lineTo(400, 400);
    ctx.quadraticCurveTo(750, 450, 800, 800);
    ctx.stroke();

需要注意的是繪制第二段的時候，需要調整好lineDash的segments的值。

歡迎關注公衆号“ITman彪叔”。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術教育訓練師、職業規劃師。熟悉Java、JavaScript、Python語言，熟悉資料庫。熟悉java、nodejs應用系統架構，大資料高并發、高可用、分布式架構。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程式員思維能力訓練和教育訓練、程式員職業規劃有濃厚興趣。