Question

我正在玩HTML5 Canvas和Javascript，并找到一些有趣的绘制线条的逻辑。也许你可以帮助我。

我想绘制宽度增加的线条，但是当宽度太宽而且边缘线变为1时，我想添加一些1px的边距。这发生在i变为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();

在我添加了IncreaseHorizontal变量（1,2,3）之后，线条的绘制获得了x轴的额外像素，在第14行之后，这就是它的外观：

这看起来很奇怪，因为当我硬编码15而不是（14 + increaseHorizontal）时，第15行的绘图看起来更好，但是在所有行中x轴的整体增加值。

我希望我说的很清楚，我希望这只是一个我没想到的小错误。

以下是整个代码示例：

＆＃13;

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();

＆＃13;

canvas {
        border: 2px solid #000;
      }

＆＃13;

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

＆＃13;

Link to the jsfiddle

Answer 1

您可以跟踪新的起始位置并使用它。

＆＃13;

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();

＆＃13;

canvas {
  border: 2px solid #000;
}

＆＃13;

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

＆＃13;

具有增加边距的HTML5 Canvas行

1 个答案: