здравствуйте! пишу приложение для построения дерева Пифагора на js. возникло две проблемы:
не строится правая часть дерева, то есть не запускается функция, где угол уходит вправо. и это при том, что пару минут назад все работало прекрасно. смотрю уже полчаса, где же у меня ошибка. никак ее не найду
при клике на кнопку канвас должен очищаться (функция clearRect()), но почему-то этого не происходит. почему?
наверняка у меня глупые ошибки, но я их не вижу. буду благодарен если поможете их разглядеть
код в песочнице
Когда должна строиться вторая часть дерева условие params.max > params.min не выполняется. Залоггировал значение params для каждого вызова дерева и вижу что значения перестают меняться после определенного момента.
Скорее всего у тебя раньше была где-то строчка которая меняла значение в params, теперь ее нет.
Очистка происходит. И дерево рисуется сразу поверх чистого канваса.
Я смог добыть эту иформацию с помощью дебаггера. Очень годная штука чтобы разобраться как работает твой код, какие значения переменных и кто кого вызывает Chrome DevTools - Chrome for Developers
Второе. Очень сложно работать с глобальным (для потребителей) объектом params, значения в котом меняют разные функции в разный момент времени. Попробуй написать такие функции, которые бы по-максимуму зависили только от своих аргументов, и не пытались менять значения в некотором общем месте. Чем раньше научишься избегать такого подхода тем проще будет потом писать все более и более сложные программы.
насчёт очистки канваса. в общем, я перенес эту функцию на событие нажатия клавиши. да, все работает, как ты и говорил. но когда я повторно строю дерево уже на очищенном канвасе, у меня происходит наложение старого дерева на новое, как и при клике. возможно, вызова функций просто сохраняются куда-то как массив? и потом все “вываливается”
Все оказалось проще. Пример использования API канваса:
ctx.beginPath(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path
получается нужно каждый раз “начинать линию”. В твоем случае линия как бы продолжалась между вызовами, и на каждый вызовstroke перерисовывалась вся линия.
Иными словами drawLine должна выглядеть так:
function drawLine(x, y, c) {
ctx.beginPath()
ctx.lineWidth = params.width;
ctx.strokeStyle = color.value;
ctx.moveTo(x, y);
ctx.lineTo(Math.round(x + params.max * Math.cos(c)), Math.round(y - params.max * Math.sin(c)));
ctx.stroke();
}
точно! спасибо за помощь! я в начале, когда только начинал работу над приложением, пробовал эту функцию. я думал что из-за ее отсутствия дерево будет все, как паутина, запутанное. но нет. все работало как надо и без этой ф-ции. поэтому я ее убрал, и совсем забыл и думать про нее. не подумал, что это может повлиять на повторную постройку деревьев. но на будущее, буду знать