Сетка javascript

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали как работать с объектом geolocation в html5. В данной статье я бы хотел отойти от теории и написать пример того, как можно нарисовать макетную сетку на холсте ("canvas") с помощью html5 и javascript. Пусть требуется написать функцию, которая отрисовывает макетную сетку. Необходимо предусмотреть возможность изменение размеров холста, ячеек сетки и цвета линий

Для начала подготовим разметку и добавим стили к элементу "canvas":

<!doctype html>
<html>
<head>
  <title>Макетная сетка javascript</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    canvas {
      display: block;
      margin: 20px auto 0;
      border: 1px dotted #000;
    }
  </style>
</head>
<body>
  <canvas id="mycanvas" ></canvas>
</body>
</html>

Рисование выполняется исключительно средствами javascript. Приведу пример кода:

<script>
   var myGridObject = {
	canvasWidth : 400, //ширина холста
	canvasHeight : 400, //высота холста
	cellsNumberX : 15, //количество ячеек по горизонтали
	cellsNumberY : 15, //количество ячеек по вертикали
	color : "#00f", //цвет линий
        //Метод setSettings устанавливает все настройки
	setSettings : function() {
                // получаем наш холст по id
		canvas = document.getElementById("mycanvas");
                // устанавливаем ширину холста
		canvas.width = this.canvasWidth;
                // устанавливаем высоту холста
		canvas.height = this.canvasHeight;
                // canvas.getContext("2d") создает объект для рисования
		ctx = canvas.getContext("2d");
                // задаём цвет линий
		ctx.strokeStyle = this.color;
                // вычисляем ширину ячейки по горизонтали
		lineX = canvas.width / this.cellsNumberX;
                // вычисляем высоту ячейки по вертикали
		lineY = canvas.height / this.cellsNumberY;
	},
        // данная функция как раз и будет отрисовывать сетку
	drawGrid : function() {
                // в переменной buf будет храниться начальная координата, откуда нужно рисовать линию
                // с каждой итерацией она должна увеличиваться либо на ширину ячейки, либо на высоту
		var buf = 0;
		// Рисуем вертикальные линии
		for (var i = 0; i <= this.cellsNumberX; i++) {
                        // начинаем рисовать
			ctx.beginPath();
                        // ставим начальную точку
			ctx.moveTo(buf, 0);
                        // указываем конечную точку для линии
			ctx.lineTo(buf, canvas.height);
                        // рисуем и выводим линию
			ctx.stroke();
			buf +=lineX;
		}		
		buf = 0;
		// Рисуем горизонтальные линии
		for (var j = 0; j <= this.cellsNumberY; j++) {
			ctx.beginPath();
			ctx.moveTo(0, buf);
			ctx.lineTo(canvas.width, buf);
			ctx.stroke();
			buf +=lineY;
		}
	}
}
myGridObject.setSettings();
myGridObject.drawGrid();
</script>

Я решил сделать один объект, в котором будет пять свойств и два метода: "setSettings()" и "drawGrid()". Специально решил показать, как можно реализовать такую задачу в объектном стиле. Хотя, именно для такой задачи, этого и не требовалось. Хорошо бы подошёл и функциональный подход.

Что в итоге получилось вы можете посмотреть ниже:

Макетная сетка:

В качестве домашнего задания: улучшите механизм создания макетной сетки, добавив интерактивности. Создайте форму с 5 элементами "input", в которые можно будет вводить значения наших свойств (canvasWidth, canvasHeight, cellsNumberX, cellsNumberY, color) и одной кнопкой, по нажатию на которую будет перерисовываться сетка.

В данной статье мы нарисовали на холсте макетную сетку. В одной из следующих статей будем делать игру "крестики-нолики"

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.