html5 canvas粒子星空,html5 canvas ( 绘制一片星空 )

canvas

*{margin:0;padding:0;outline:none;border:none;

}#canvas{width:7rem;margin:.25rem 0 0 1.5rem;border:1px solid black;

}

/**

* rem 布局初始化*/$('html').css('font-size', $(window).width()/10);

/**

* 获取 canvas 画布

* 获取 canvas 绘图上下文环境*/

varcanvas=$('#canvas')[0];varcxt=canvas.getContext('2d');/**

* 绘制一片星空*/cxt.fillStyle= 'black';

cxt.fillRect(0,0, canvas.width, canvas.height);for(vari= 0; i<= 300; i++){varfiveStart={};

fiveStart.bigRadius=Math.random()*6+6;

fiveStart.smallRadius=fiveStart.bigRadius/2.0;

fiveStart.offsetX=Math.random()*canvas.width;

fiveStart.offsetY=Math.random()*canvas.height;

fiveStart.RotationAngle=Math.random()*360;

console.log(fiveStart);

drawFiveStar(cxt, fiveStart);

}/**

* 绘制五角星的方法*/

functiondrawFiveStar(cxt, fiveStart){

cxt.beginPath();varx= 0, y= 0;for(vari= 0; i< 5; i++){

x=Math.cos((18+72*i-fiveStart.RotationAngle)/180*Math.PI);

x=x*fiveStart.bigRadius+fiveStart.offsetX;

y= -Math.sin((18+72*i-fiveStart.RotationAngle)/180*Math.PI);

y=y*fiveStart.bigRadius+fiveStart.offsetY;

cxt.lineTo(x,y);

x=Math.cos((54+i*72-fiveStart.RotationAngle)/180*Math.PI);

x=x*fiveStart.smallRadius+fiveStart.offsetX;

y= -Math.sin((54+i*72-fiveStart.RotationAngle)/180*Math.PI);

y=y*fiveStart.smallRadius+fiveStart.offsetY;

cxt.lineTo(x,y);

}

cxt.closePath();

cxt.lineWidth= 3;

cxt.strokeStyle= "#FD5";

cxt.fillStyle= 'yellow';

cxt.lineJoin= "round";

cxt.fill();

cxt.stroke();

}