Как задаются координаты рисования линий в этом js коде холста?

Question

[GAS-ART]

Учусь по книге. Есть пример кода по рисованию линий на холсте, в целом код понятен кроме одного нюанса в цикле:
"context.fillText(' cap:' + caps[j], 88 + j * 180, 45 + k * 120)
...
context.lineTo(155 + j * 180, 20 + k * 120)" ....
конкретно не пойму что значит в методе fillText это выражение 88 + j * 180 и тоже самое в методе MoveTo и LineTo. Это координаты? и как они считаются? почему через множитель? вообщем вопросов больше чем ответов ((( Полный код примера выкладываю ниже, буду благодарен за любую помощь, очень уж хочется разобраться.

<canvas id="mycanvas" width="535" height="360">Это элемент холст</canvas>

function O(i) {return typeof i == 'object' ? i : document.getElementById(i)}
			function S(i) {return O(i).style}

			canvas = O('mycanvas')
			context = canvas.getContext('2d')
			S(canvas).background = 'lightblue'
			context.strokeStyle 	= 'green'
			context.fillStyle 	= 'red'
			context.font 			= 'bold 13pt Courier'
			context.textBaseline = 'top'
			context.textAlign 	= 'center'
			context.lineWidth 	= 20
			caps						= [' butt', 'round', 'square']
			joins						= [' roud', ' bevel', ' miter']
			for (j = 0; j < 3; ++j)
			{
				for (k = 0; k < 3; ++k)
				{
					context.lineCap = caps[j]
					context.lineJoin = joins[k]
					context.fillText(' cap:' + caps[j], 88 + j * 150, 45 + k * 120)
					context.fillText(' join:' + joins[k], 88 + j * 180, 65 + k * 120)

					context.beginPath()
					context.moveTo(20 + j * 100, 100 + k * 100)
					context.lineTo(20 + j * 100, 20 + k * 100)
					context.lineTo(155 + j * 100, 20 + k * 100)
					context.lineTo(155 + j * 100, 100 + k * 100)
					context.stroke()
					context.closePath()
				}
			}

Comments

[Kovalsky]

Мне кажется если вы попробуете изменить любое из этих значений и посмотрите на результат, то вам сразу станет понятно какой смысл они имеют. Или вы уже пробовали?

[GAS-ART]

Пробовал. Меняются координаты текста и линий. Непонятна просто сама логика формирования этих координат. не пойму что конкретно находится в переменных j и k и почему умножение идет на число а не суммирование.

[Kovalsky]

Артем, ну уберите их вообще, посмотрите на результат. Я не думаю что тут скрыт какой-то глубинный смысл, просто значения. Там могло быть 1, 2, 3, 4 или 5, и результат был бы менее красивый

Answer 1

[Денис Инешин]

Просто так удобнее считать в цикле.

• 88 - это некий отступ
  
• 100 - это шаг
  
• j - номер шага
  

for (let j = 0; j < 3; j++) {
  const x = 88 + j * 100; // умножение выполнится раньше сложения
  console.log(x); // 88, 188, 288
}

Comments

[GAS-ART]

Все понятно, спасибо большое!