在HTML5畫布上繪制虛線的替代方法是什么？

Question

問題背景：我正在一個與其他數據一起在HTML畫布上繪制垂直和水平線的站點上。 當用戶要下載報告時，可以將該頁面轉換為PDF文件。 最初，我們使用一條默認樣式線來繪制圖形值。 最近，我們在圖上添加了第二種數據類型，並使用context.setLineDash([x,x])繪制了第二種數據類型的虛線。 這在瀏覽器中效果很好。 但是，當PDF轉換器軟件嘗試轉換帶虛線的報告時，虛線不會顯示在生成的PDF中。

經過一些故障排除后，我將問題縮小到setLineDash()屬性。 看來我們的轉換器軟件可以理解普通的樣式行，但不能理解setLineDash()屬性。 該轉換器軟件已有幾年歷史了，我被告知不會購買該轉換器的更新版本。 我還發現創作者不支持我們的版本。

問題：由於我無法將我們的HTML更新為PDF轉換器軟件或直接獲得對其的支持，因此誰能提供不使用setLineDash()在畫布上繪制虛線的替代方法的示例嗎？

編輯

@ K3N，

按照您將這個問題標記為另一個問題的副本時收到的通知中的說明，我正在編輯以解釋它的不同之處。

我相信，盡管兩個問題的答案都可能相似，但我的問題並非您所指出問題的重復。 我承認這兩個問題都要求一種在畫布上繪制虛線的方法。 但是，另一個問題是詢問如何通過任何方法實現虛線。 我的問題特別指出，我無法使用setLineDash()屬性繪制虛線。 這種差異限制了可能的答案，我相信足以使兩個問題都足夠清楚。

Answer 1

您可以創建線段。

該函數將從dashArr的信息中繪制一條虛線，例如[2,2]將繪制一條2像素的線，然后繪制2像素的間隙並重復。

function dashedLine(x1,y1,x2,y2,dashArr){
    // get the normalised line vector from start to end
    var nx = x2 - x1;
    var ny = y2 - y1;
    const dist = Math.sqrt(nx * nx + ny * ny);  // get the line length
    nx /= dist;
    ny /= dist;
    var dashIdx = 0;  // the index into the dash array
    var i = 0;        // the current line position in pixels
    ctx.beginPath();  // start a path
    while(i < dist){   // do while less than line length
         // get the line seg dash length
         var dashLen = dashArr[(dashIdx ++) % dashArr.length];
         // draw the dash
         ctx.moveTo(x1 + nx * i, y1 + ny * i);
         i = Math.min(dist,i + dashLen);
         ctx.lineTo(x1 + nx * i, y1 + ny * i);
         // add the spacing
         i += dashArr[(dashIdx ++) % dashArr.length];
         if(i <= 0) { // something is wrong so exit rather than endless loop
              break;
         }
     }
     ctx.stroke();  // stroke
}

  function dashedLine(x1,y1,x2,y2,dashArr){ var nx = x2 - x1; var ny = y2 - y1; const dist = Math.sqrt(nx * nx + ny * ny); nx /= dist; ny /= dist; var dashIdx = 0; var i = 0; ctx.beginPath(); while(i < dist){ var dashLen = dashArr[(dashIdx ++) % dashArr.length]; ctx.moveTo(x1 + nx * i, y1 + ny * i); i = Math.min(dist,i + dashLen); ctx.lineTo(x1 + nx * i, y1 + ny * i); i += dashArr[(dashIdx ++) % dashArr.length]; if(i <= 0) { // something is wrong so exit rather than endless loop break; } } ctx.stroke() } const ctx = canvas.getContext("2d"); dashedLine(0,0,300,150,[5,5]); 

 canvas { border : 2px solid black; } 

 <canvas id="canvas"></canvas> 

Answer 2

我也面臨着類似的問題，因此我使用了不同的方法來解決此問題。 如果有人遇到類似問題，我會發布它。

您可以在畫布上下文上設置筆划樣式。 描邊圖案可以是任何畫布圖案。 所以在這里我創建了一個1像素高和6像素寬的圖像。 前三個像素為黑色，其他三個像素為白色。 現在，我創建了圖像以創建重復圖案。

var linePattern;
imageToUsedAsPattern.onload = function() {
    linePattern = context.createPattern(imageToUsedAsPattern, "repeat");
    context.strokeStyle=linePattern; 
}
var imageToUsedAsPattern = new Image();
imageToUsedAsPattern.src = "images/linePatterns.jpg";

現在，所有對context.stroke的調用都將使用該模式來繪制筆划。 就像從畫布的左上角到右下角創建一條線一樣，它將是一條虛線。

context.moveTo(0,0);
context.lineTo(canvas.width,canvas.height);
context.stroke();

請參閱以下鏈接的完整說明https://shamailamahmood.blogspot.com/2019/02/html5-canvas-drawing-draw-dotted-or.html