HTML5 Canvas с увеличенным полем

Question

HTML5 Canvas с увеличенным полем

1

Я играю с HTML5 Canvas и 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();

После того, как я добавлю переменную роста. Горизонтальная переменная, которая составляет 1,2,3, рисунок линии получает дополнительные пиксели по оси x, после 14-й строки, вот как выглядит:

Кажется странным, потому что, когда я жестко кодирую 15 вместо (14 + увеличение по горизонтали), рисунок выглядит лучше для 15-й линии, но с общим увеличенным значением оси х по всем линиям.

Я надеюсь, что это ясно, что я говорю, и я надеюсь, что это всего лишь небольшая ошибка, о которой я не думаю.

Вот пример всего кода:

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>

Ссылка на jsfiddle

Tadas Stasiulionis 15 июнь 2017, в 15:45

Источник

Теги:

javascript

html5

canvas

1 ответ

Ещё вопросы

Nope · Accepted Answer · 2017-06-15T11-45-00.000Z

Вы можете отслеживать новую стартовую позицию и использовать ее.

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>