HTML5畫布線增加邊距

Question

我在玩HTML5畫布和Javascript，並找到一些有趣的繪製線條的邏輯。也許你可以幫助我。

我想繪製增加寬度的線條，但是當寬度太寬而沒有邊距並且幾條線條變成一條時，我想添加一些1px的邊距。這發生在我成爲14

function draw5() { 
    var ctx = document.getElementById('tutorial').getContext('2d'); 
    var increaseHorizontal = 0; 
    for(var i = 0; i < 17; i++) { 
    var lineWidthVar = 1 + i; 
    if(i >= 14){ 
     increaseHorizontal += 1; 
    } 
    ctx.lineWidth = lineWidthVar; 
    ctx.beginPath(); 
    ctx.moveTo(5 + i * (14 + increaseHorizontal), 5); 
    ctx.lineTo(5 + i * (14 + increaseHorizontal), 140); 
    ctx.stroke(); 
    } 
} 

draw5(); 

後之後，我加入increaseHorizo​​ntal變量，它是1,2,3，線的繪製得到額外的像素x軸，14日線後，這是怎麼了外觀：

似乎很奇怪，因爲當我15進行硬編碼，而不是（14 + increaseHorizo​​ntal），圖紙查找15號線更好，但在整個所有行x軸的整體增值。

我希望我的意思很清楚，我希望這只是我沒有想到的一個小錯誤。

這裏是整個代碼示例：

function draw5() { 
 
     var ctx = document.getElementById('tutorial').getContext('2d'); 
 
     var increaseHorizontal = 0; 
 
     for(var i = 0; i < 17; i++) { 
 
      var lineWidthVar = 1 + i; 
 
      if(i >= 14){ 
 
      increaseHorizontal += 1; 
 
      } 
 
      ctx.lineWidth = lineWidthVar; 
 
      ctx.beginPath(); 
 
      ctx.moveTo(5 + i * (14 + increaseHorizontal), 5); 
 
      ctx.lineTo(5 + i * (14 + increaseHorizontal), 140); 
 
      ctx.stroke(); 
 
     } 
 
     } 
 

 
     draw5();

canvas { 
 
     border: 2px solid #000; 
 
     }

<canvas id="tutorial" width="300" height="150"></canvas>

Link to the jsfiddle

Answer 1

你可以跟蹤新的開始位置和使用。

function draw5() { 
 
    var ctx = document.getElementById('tutorial').getContext('2d'); 
 
    var startPosition = 0; 
 
    var spacer = 5; 
 
    for (var i = 0; i < 17; i++) { 
 
    var lineWidthVar = 1 + i; 
 
    startPosition = startPosition + lineWidthVar + spacer; 
 

 
    ctx.lineWidth = lineWidthVar; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(startPosition, 5); 
 
    ctx.lineTo(startPosition, 140); 
 
    ctx.stroke(); 
 
    } 
 
} 
 

 
draw5();

canvas { 
 
    border: 2px solid #000; 
 
}

<canvas id="tutorial" width="300" height="150"></canvas>