0 like 0 dislike
8 views
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?
| 8 views

0 like 0 dislike
First, in the first example you have commented out line Russian letter "x", so after the first run write it all breaks down. If you write a normal x, the result will be normal.
\r
Second, local variables must be declared as "var x1=x;", and the fact that you have now written, is a global variable x1 (also known as window.x1). Read about scope in JS.
by
0 like 0 dislike
//x1 = x — a where the point-with-comma? error of only 3 and write.
by
0 like 0 dislike
it is not very clear who is ugol and why he did not angle
by
0 like 0 dislike
``draw(context, newx, newy, depth-1); //And continue our business :) draw(context, newx, newy, depth-1); draw(context, newx, newy, depth-1); ``

You have to understand that up to 2nd or 3rd line will never happen.
If it is clear, then it should be clear, and that variables.
by

0 like 0 dislike