Recently had a bit to learn drawing using Canvas and JavaScript. Everything went smoothly, however, I ran into one unpleasant (or pleasant) feature is a JavaScript — strange behavior of the function during recursion in the presence of local variables.
Let's consider an example.
function write(x) { if (x != 0) { document.write(x); //x1 = x write(x-1); write(x-1); } }
In this case, we will appear on the page sequence "3211211" that is very logical. However, if uncomment the line "x1 = x", which from my point of view does not affect the function, it will appear on the page are just "3".
Now a little more, maybe a little different, and associated with the drawing :)
The task was to recursively draw the tree. Essentially to draw a line from the end of which extends three lines at different angles, and so on the n-Noe number of times. The problem is very easy, but in the end I had problems.
Here is the function code (request for code is not kicking, he was written with a purpose learn to work with canvas):
function drawall() { canvas = document.getElementById("canvas"); context = canvas.getContext('2d'); canvas.width = $(document).width(); //Get the size of the document using jQuery, but you can set arbitrary canvas.height = $(document).height(); depth = 4; context.lineWidth = depth; context.beginPath(); context.moveTo(0,0); context.lineTo(100,100); context.stroke(); draw(context, 100, 100, depth-1); } function draw(context, x, y, depth) { if (depth!=0) { context.lineWidth = depth; // Set the thickness, that of course will decrease context.beginPath(); length = 200; context.moveTo(x, y); angle = Math.random()*(Math.PI/2); //Choose a random angle from 0 to 90 degrees newx = Math.cos(ugol)*angle+x; //count the coordinates of new points newy = Math.sin(ugol)*angle+y; context.lineTo(newx, newy); // and draw to them context.stroke(); draw(context, newx, newy, depth-1); //And continue our business :) draw(context, newx, newy, depth-1); draw(context, newx, newy, depth-1); } }
I thought this is normal, but I was greatly surprised when I saw the result — instead of "wood" on the screen all the "branches" were for each other. It seems that calling "child" function overwrites the values in the variables newx and newy are everywhere and in the end, the following steps starting from the last values of newx and newy.
The final question is how to make the values of the variables are not overwritten?
