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>