Canvas draws randomly blinking stars

Canvas to draw a star:

The regular stars have inscribed circle and tangential circles, and the angle between each of the two points is fixed, so you can get the coordinates of each point of the star and draw the stars.

1  functionDrawstars (x,y,radius1,radius2,num,drawtype,color) {2                 varAngle = 360/(num*2);3                 vararr = [];4                  for(vari=0;i<num*2;i++){5                     varStarobj = {};6                     if(i%2==0){7starobj.x = X+radius1*math.cos (i*angle*math.pi/180);8STAROBJ.Y = Y+radius1*math.sin (i*angle*math.pi/180);9}Else{Tenstarobj.x = X+radius2*math.cos (i*angle*math.pi/180); OneSTAROBJ.Y = Y+radius2*math.sin (i*angle*math.pi/180); A                     } - Arr.push (starobj); -                 } the  - Cxt.beginpath (); -cxt.fillstyle=color; -Cxt.strokestyle =color; +Cxt.moveto (arr[0].x,arr[0].y); -                  for(vari=1;i<arr.length;i++){ + Cxt.lineto (ARR[I].X,ARR[I].Y); A                 } at Cxt.closepath (); -                 if(drawtype== "Fill"){ - Cxt.fill (); -}Else{ - Cxt.stroke (); -                 } in}

To add a random attribute to a star:

1 varStararr=[]; Multiple Star Objects2              for(vari=0;i<5;i++){3                 varstarobj={4radius1:10+5*math.random (),5radius2:2+4*math.random (),6x:30+ (canvas.width-60) *math.random (),7y:30+ (canvas.height-60) *math.random (),8Num:4,9angle:360*math.random (),Tenchangeangle:-5+10*math.random (), OneColor: "RGB (" +parseint (255*math.random ()) + "," +parseint (255*math.random ()) + "," +parseint (255*math.random ()) + ")" A                 } - Stararr.push (starobj); -}

Randomly generate stars and add animations (flashing, rotating, etc.):

1SetInterval (function(){2Cxt.clearrect (0,0,500,500);3                  for(vari=0;i<stararr.length;i++) {4stararr[i].angle+=Stararr[i].changeangle;5 Cxt.save ();6 Cxt.beginpath ();7 cxt.translate (stararr[i].x, stararr[i].y);8                     cxt.rotate (Stararr[i].angle * math.pi/180);9Cxt.scale (Math.sin (Stararr[i].angle * math.pi/180), Math.sin (Stararr[i].angle * math.pi/180));TenCxt.globalalpha = Math.Abs (Math.sin (Stararr[i].angle * math.pi/180)); OneDrawstars (0,0,stararr[i].radius1, Stararr[i].radius2, Stararr[i].num, "Fill", "white"); A Cxt.restore (); -                 } -},30);

By this, randomly generated animated stars will be finished.

Add the following points, when I use canvas in angular to draw stars, I practice when window.onload=function (canvas ()), FF, etc. are normal, error in IE9, Canvas.getcontext (' 2d ') Is null, do not know what reason, I use canvas,canvas.getcontext in the directive (' 2d ') is not NULL, but can not draw the star, did not find the reason, the final curve salvation. Under the canvas to add a hidden picture, the image of the onload implementation of canvas (), enough twists and turns, if there is a better way or know the reason, welcome message to provide, not very grateful.

Canvas draws randomly blinking stars