canvas画随机闪烁的星星

canvas画一颗星星：

规则的星星有内切圆和外切圆，每两个点之间的角度是固定的，因此可得到星星的每个点的坐标，画出星星。

  function drawStars(x,y,radius1,radius2,num,drawType,color){
                 var angle = 360/(num*2);
                 var arr = [];
                 for(var i=0;i<num*2;i++){
                     var starObj = {};
                     if(i%2==0){
                         starObj.x = x+radius1*Math.cos(i*angle*Math.PI/180);
                         starObj.y = y+radius1*Math.sin(i*angle*Math.PI/180);
                     }else{
                         starObj.x = x+radius2*Math.cos(i*angle*Math.PI/180);
                         starObj.y = y+radius2*Math.sin(i*angle*Math.PI/180);
                     }
                     arr.push(starObj);
                 }

                 cxt.beginPath();
                 cxt.fillStyle=color;
                 cxt.strokeStyle = color;
                 cxt.moveTo(arr[0].x,arr[0].y);
                 for(var i=1;i<arr.length;i++){
                     cxt.lineTo(arr[i].x,arr[i].y);
                 }
                 cxt.closePath();
                 if(drawType=="fill"){
                     cxt.fill();
                 }else{
                     cxt.stroke();
                 }
             }

给星星添加随机属性：

 var starArr=[];                           //多个星星对象
             for(var i=0;i<5;i++){
                 var starObj={
                     radius1:10+5*Math.random(),
                     radius2:2+4*Math.random(),
                     x:30+(canvas.width-60)*Math.random(),
                     y:30+(canvas.height-60)*Math.random(),
                     num:4,
                     angle:360*Math.random(),
                     changeAngle:-5+10*Math.random(),
                     color:"rgb("+parseInt(255*Math.random())+","+parseInt(255*Math.random())+","+parseInt(255*Math.random())+")"
                 }
                 starArr.push(starObj);
             }

随机产生星星并添加动画（闪烁、旋转等）：

 setInterval(function(){
                 cxt.clearRect(0,0,500,500);
                 for(var i=0;i<starArr.length;i++) {
                     starArr[i].angle+=starArr[i].changeAngle;
                     cxt.save();
                     cxt.beginPath();
                     cxt.translate(starArr[i].x, starArr[i].y);
                     cxt.rotate(starArr[i].angle * Math.PI / 180);
                     cxt.scale(Math.sin(starArr[i].angle * Math.PI / 180), Math.sin(starArr[i].angle * Math.PI / 180));
                     cxt.globalAlpha = Math.abs(Math.sin(starArr[i].angle * Math.PI / 180));
                     drawStars(0,0,starArr[i].radius1, starArr[i].radius2, starArr[i].num, "fill", "white");
                     cxt.restore();
                 }
             },30);

到此，随机产生有动画的星星就完了。

下面还补充点，当我在angular中使用canvas画星星时，我的做法时window.onload=function(canvas())，FF等均正常，在IE9中报错，canvas.getContext('2d')为null，不知道是什么原因，我在directive中用canvas，canvas.getContext('2d')不为null，但是没法画出星星，没找到原因，最后曲线救国。。在canvas下加了个隐藏的图片，图片的onload执行canvas()，够曲折的方法，如果有更好的方法或是知道原因的，欢迎留言提供，不甚感激。