Как нарисовать сетку на Canvas?

Пользователь

от clifford , в категории: Другие , 8 месяцев назад

Как нарисовать сетку на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от dayna , 8 месяцев назад

@clifford 

Сначала нужно создать контекст Canvas и задать цвет и толщину линии:

1
2
3
4
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;


Затем нужно использовать цикл для рисования горизонтальных и вертикальных линий:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var step = 20; // расстояние между линиями
for (var i = 0.5; i < canvas.width; i += step) {
  ctx.moveTo(i, 0);
  ctx.lineTo(i, canvas.height);
}
for (var i = 0.5; i < canvas.height; i += step) {
  ctx.moveTo(0, i);
  ctx.lineTo(canvas.width, i);
}
ctx.stroke();


Вызов ctx.stroke() завершит процесс и на Canvas нарисуется сетка.