Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   рисование в canvas дерева через рекурсивную функцию (https://javascript.ru/forum/misc/46930-risovanie-v-canvas-dereva-cherez-rekursivnuyu-funkciyu.html)

Atner 30.04.2014 09:13

рисование в canvas дерева через рекурсивную функцию
 
На сайте learn.code.org встретился простой пример рисования дерева через рекурсивную функцию.

Там и код прилагается :yes:

Захотел попробовать повторить нарисовать в javascript через canvas. Да вот как-то рекурсивная функция не работает - пример jsfiddle. Прошу подсобить советами.

drawTree(context, 9, 2);
 
function drawTree(context,depth,branches) {
    var step=5;
    if (depth>0) {
            //выбрать цвет
            context.strokeStyle = 'rgb(' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) +')';
            //рисуем
            drawTo2(context,step*depth,angle);
            angle = angle + 40;
            for (a=0; a<=branches; a++) {
                angle = angle - (180/branches);
                drawTree(context,depth-1, branches);
            };
            angle = angle+50; 
                drawTo2(context,step*depth,angle);
 
            } else {
            //alert ('no depth deifined');
    };
    };
 
function drawTo2(context, length, angle) {
        //angle = angle + 90;
        x1 = x + (Math.sin(angle*Math.PI/180)*length); 
        y1 = y + (Math.cos(angle*Math.PI/180) *length); 
        context.moveTo(x,y);
        context.lineTo(x1,y1);
        x = x1;
        y = y1;
    }

	
atner на форуме Сообщить модератору о нарушении

рони 30.04.2014 11:28

Atner,
пренебрежение к var особенно в строке 11 тут или строке 101 там -- да и в прочих местах даёт непредсказуемые результаты )))

Atner 30.04.2014 13:45

Удивительное дело - добавил var
for (var a=0; a<=branches; a++)

и всё заработало!

Спасибо мил человек Рони! :dance: :dance: :thanks: :dance: :dance:


Часовой пояс GMT +3, время: 03:53.