<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas星座</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
margin:10px 0 0 10px;;
}
input{
outline: none;
font-size:16px;
}
p{
margin-bottom: 10px
}
input[type=date]{
height:36px;
text-indent:10px;
}
input[type=button]{
background:#3A92FF;
color:white;
border: none;
height:40px;
padding:0 10px;
margin-left: -2px;
}
#canvas{
margin-left:10px;
background-color: #000;
display: none;
}
</style>
</head>
<body>
<div ;
var len=lines.length,i,ii,line,point;
ctx.beginPath();
while(len--)
{
i=1;
line=lines[len];
ii=line.length;
point=points[line[0]];
ctx.moveTo(point[0]*w,point[1]*h);
for(;i<ii;i++){
point=points[line[i]];
ctx.lineTo(point[0]*w,point[1]*h);
}
}
ctx.stroke();
/*创建小圆*/
var cur;
i=0;
ii=points.length;
for(;i<ii;i++){
cur=points[i];
new Circle(cur[0]*w,cur[1]*h).draw();//new出实例
}
}
/*创建小圆的构造函数*/
function Circle(x,y,r){
this.x=x;
this.y=y;
this.r=r||Math.round(Math.random()*8+4);
}
Circle.prototype={
draw:function(){
ctx.beginPath();
g1=ctx.createRadialGradient(this.x,this.y,Math.round(Math.random()*1+1),this.x,this.y,Math.round(Math.random()*3+6));
g1.addColorStop(0,'rgba(255,255,255,.9)');
g1.addColorStop(1,'rgba(0,0,0,.1)');
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
ctx.fillStyle =g1;
ctx.closePath();
ctx.fill();
return this;
}};
/*点击‘展示我的星空图’按钮*/
btn.onclick=function(e){
clearInterval(timer);
e.preventDefault();
if (!birth.value){
alert("请选择您的出生日期");
}else{
canvas.style.display="block";
date = new Date(birth.value.replace(/-/g,'/')).getTime();
timer=setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.strokeText(getStarSign(date), 50, 50);
constellation(ctx,star[getStarSign(date)],canvas.width,canvas.height);
},500);
}
};
</script>
</body>
</html>