HTML5 | Influence of variable scope and setinterval () method in canvas

Demo-randomly draw a circleImplementation ideas:

• divides the drawing of a circle into - Share, setinterval () method defines every time N draw a new, each copy of the start path is the last end of the path, the implementation of the step drawing.
• through math.random () , randomly generates the coordinates of the circle radius color.

Implementation method:

1. Define Canvas and Contact
2. Set stepping Properties
3. set the Random Circle property ( 5 a parameter: x , y , radius, start, end, direction)
4. Cycle through painting

<<index.html>>

<! DOCTYPE html>#canvas {border:1px black solid; }    </style>functionInitdraw () {varCanvas = document.getElementById (' Canvas '); varCTX = Canvas.getcontext (' 2d '); varCTX2 = Canvas.getcontext (' 2d '); varstep; //var sangle;        //var eangle;        varx, Y, R; varAdd, steptime, counterclockwise; //Stepping PropertiesStep = 0; Add= Math.PI * 2/100; Steptime= 20; //Random Circle PropertiesSangle = 0; Eangle= Sangle +add; Counterclockwise=false; X= Math.random () * 800 + 100; Y= Math.random () * 200 + 100; R= Math.random () * 50 + 50; Ctx.strokestyle= "#" + (Math.random () * 0x1000000 << 0). toString (16); Ctx.shadowcolor= "#" + (Math.random () * 0x1000000 << 0). toString (16);        Console.log (Ctx.strokestyle);        Console.log (Ctx2.strokestyle); Ctx.linewidth= 1.0; Ctx.shadowoffsetx= 0; Ctx.shadowoffsety= 0; Ctx.shadowblur= 10; //Draw a circle        varDrawid =setinterval (Draw, steptime); functionDraw () {if(Step < 100) {                //draw the path and drawCtx.beginpath ();                Ctx.arc (x, Y, R, Sangle, Eangle, counterclockwise);                Ctx.stroke ();                Ctx.closepath (); //Step inSangle =Eangle; Eangle+=add; //Console.log ("Drawid:" + Drawid + ", Step:" + step);                //Console.log (ctx.strokestyle);step++; } Else{clearinterval (DRAWID); }        }    }    </script></body>
different situations occur in different variable environments:
 
 

  
  

  
Global Variables: step, Sangle, Eangle, X, Y, R;
The parameters that continue to change during the execution of the drawing are Step,sangle,eangle, back to function when called again Initdraw (); redefine six global variables and brush styles, start the drawing again. The previous step and brush styles are stuck at the moment the button is pressed

  
  

  
  sangle, Eangle;   local variables:  var step, x, Y, R;  
   
 
  In the console output can be seen, When the starting position is a global variable interference with each other very much, but because  step   is a local variable, a different copy is called, and the last two laps are executed to  99   drawid   setinterval   The method is executed in turn, resulting in  sangle   location is the virtual point of jumping.  
 
 
 
     
 
  
  

  
  local variables:  var step, Sangle, Eangle, X, Y, R  
   
 
  but note that the same canvas and contact  are used in the example   
 
 
 
     
 
  
  

  
  STEP;   local variables:  var sangle, Eangle, X, Y, R;  
   
 
  Stop when the second click Turns on the circle to about half a turn  
 
  click  button   re-executes  initdraw (); step=0;   from print information you can see two different  setinterval   method to  step   variables interfere with each other until the  step   got a chance to reach  99   
 
 
 
     
 
  
  

  
... altogether  - changes, carefully defined Canvas Scope of variables in
 
 
Another test about the context:
call in the same canvas get two Context , but with the output you can see that each canvas has only one corresponding Context
after several Demo the analysis obtained the following conclusions:

 
 

  
  

  
when you call the same function , private variables are irrelevant, like C get different copies of their respective stored values
  
  

  
Canvas of the Context Style ( strokestyle/shadowcolor/ ... ) is for the Canvas (canvas) unique, i.e.
  
  

  
If you call both setinterval method, the rotation is performed, 1,2,1,2,1,2  ... and so on.
  
  

  
use with caution setinterval method, running multiple simultaneously can cause mutual interference
 
 
Legacy issues:

 
 

  
  
 
   
How do I paint different styles at the same time?
 
  
 
 
HTML5 | Influence of variable scope and setinterval () method in canvas