Блог

Главная - Вопросы по программированию - Почему моя функция не рисует несколько кирпичей?

Почему моя функция не рисует несколько кирпичей?

#javascript #html

#javascript #HTML

Вопрос:

Итак, у меня есть эта простая функция, которая должна показывать несколько кирпичей, но она показывает только один. Кто-нибудь знает почему? Я не показываю никаких ошибок.

 function drawbricks() {

  for (var r = 0; r < 12; r  ) {

    for (var c = 0; c < 6; c  ) {

      var posix = r   20;
      var posiy = c   20;

      ctx.fillRect(posix, posiy, 50, 50);

    }
  }
}

Комментарии:

1. не могли бы вы дать более подробную информацию, я имею в виду страницу, на которой вы хотите показать кирпичи. Вы можете добавить их в виде фрагмента

2. Они смещены на один пиксель — разве они не будут просто накладываться друг на друга? Может быть, попробуйте умножить вместо добавления и сделать кирпичи меньше смещения.

3. ctx здесь не определено. Пожалуйста, добавьте код, в котором вы его назначаете.

Ответ №1:

Я добавил некоторые константы, чтобы вы могли настроить свои блоки.

 const c = document.getElementsByTagName('canvas')[0];
const ctx = c.getContext('2d');
ctx.fillStyle = 'orange';
drawbricks(ctx);

function drawbricks(ctx) {
  const brickCountRows = 10;
  const brickCountColumns = 15;
  const brickWidth = 20;
  const brickHeight = 10;
  const brickSpacingX = 2;
  const brickSpacingY = 2;

  for (var r = 0; r < brickCountRows; r  ) {
    for (var c = -1; c < brickCountColumns; c  ) { // start at -1 to fill gap caused by offset (see below)
      var posix = c * (brickWidth   brickSpacingX); // switched r by c (column is x component)
      var posiy = r * (brickHeight   brickSpacingY); // switched c by r (row is y component)
      
      // offset every other row by half brickWidth   brickSpacing
      if (r%2 == 1) {
        posix  = Math.floor((brickWidth   brickSpacingX)/2)
      }

      ctx.fillRect(posix, posiy, brickWidth, brickHeight);
    }
  }
} 
 <canvas/>

Ответ №2:

Я полагаю, что вы улучшаете умножение координат вместо добавления.

   var posix = r * 20;
  var posiy = c * 20;

Но все же «кирпичи» будут накладываться друг на друга.

Комментарии:

1. да, после публикации вопроса я изменил на multiply, и он по-прежнему не работает. Есть идеи?

2. @Elena Кирпичи больше, чем смещение.

3. @Elena тогда опубликуйте весь код. Не могу вам помочь, если мы не можем запустить ваш код.

Метки: