Блог

Главная - Вопросы по программированию - Смещения сетки Javascript Canvas

Смещения сетки Javascript Canvas

#javascript #html5-canvas

#javascript #html5-холст

Вопрос:

Я пытаюсь создать сетку с помощью canvas. Сетка работает нормально. Но я бы хотел, чтобы сетка имела смещение, чтобы она выравнивалась по нижнему правому краю (просто добавляя поля слева и сверху). По какой-то причине у меня возникли проблемы, и я не могу понять, почему, я могу добавить левое поле нормально, только не сверху. Когда я добавляю его в начало, нижние строки путаются.

Я ищу сетку размером 6×10. Если вы установите top_margin значение 0, вы можете увидеть, как должна выглядеть сама сетка, просто она не в нужном месте.

Кроме того, граница, которая у меня есть на canvas, предназначена только для визуального ознакомления, она не является частью окончательного дизайна.

Я уверен, что проблема, вероятно, в чем-то простом.

 c = document.getElementById("canvas");

cols = 6;
rows = 10;
col_height = 30;
col_width = 60;
grid_width = col_width * cols;
grid_height = col_height * rows;

left_margin = 42;
top_margin = 20;

var context = c.getContext("2d");

for (var x = 0; x <= grid_width; x  = col_width) { //vert lines
  context.moveTo(0.5   x   left_margin, top_margin);
  context.lineTo(0.5   x   left_margin, grid_height);
}

for (var x = 0; x <= grid_height; x  = col_height) { //hor lines
  context.moveTo(left_margin, 0.5   x   top_margin);
  context.lineTo(grid_width   left_margin, 0.5   x   top_margin);
}

context.strokeStyle = "black";
context.stroke();  
 <canvas id="canvas" style="border:1px solid #000" width="405" height="400"></canvas>

Ответ №1:

Вам просто нужно добавить свое поле для рисования вертикальных линий (так же, как вы сделали с левым полем):

 context.lineTo(0.5   x   left_margin, grid_height   top_margin);

Смотрите исправленную версию здесь: 

 c = document.getElementById("canvas");

cols = 6;
rows = 10;
col_height = 30;
col_width = 60;
grid_width = col_width * cols;
grid_height = col_height * rows;

left_margin = 42;
top_margin = 20;

var context = c.getContext("2d");

for (var x = 0; x <= grid_width; x  = col_width) { //vert lines
  context.moveTo(0.5   x   left_margin, top_margin);
  context.lineTo(0.5   x   left_margin, grid_height   top_margin);
}

for (var x = 0; x <= grid_height; x  = col_height) { //hor lines
  context.moveTo(left_margin, 0.5   x   top_margin);
  context.lineTo(grid_width   left_margin, 0.5   x   top_margin);
}

context.strokeStyle = "black";
context.stroke();  
 <canvas id="canvas" style="border:1px solid #000" width="405" height="400"></canvas>