一切尽在注释里:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>star rotate</title>
</head>
<body>
<canvas id="canvas">
当前浏览器不支持canvas,请更换浏览器使用
</canvas>
<script type="text/javascript">
window.onload=function(){
//获取canvas节点
var canvas=document.getElementById("canvas");
//设置节点的属性:宽度,高度
canvas.width=800;
canvas.height=600;
//设置绘制模式
var context=canvas.getContext("2d");
// context.moveTo(100,100);
// context.lineTo(400,400);
//绘制渐变背景的矩形
var grd=context.createLinearGradient(0,0,0,600);
//设置渐变点(范围0-1,添加渐变色),在这里我们起始设置为黑色,渐变到墨蓝色
grd.addColorStop(0,"black");
grd.addColorStop(1,"#054696");
//设置填充样式为设置好的渐变模式
context.fillStyle=grd;
//使用设置好的模式绘制矩形,在这里的矩形作为背景层
context.fillRect(0,0,800,600);
// 在背景层上面绘制200个五角星
context.fillStyle="yellow";
for(var i=0;i<200;i++){
//设置随机半径为3-8
var R=Math.random()*5+3;
//设置随机x坐标为10-790
var x=Math.random()*780+10;
//设置随机y坐标为6-354
var y=(Math.random()*580+10)*3/5;
// 设置随机旋转角度为0-72
var angle=Math.random()*72;
//设置五角星路径
starPath(context,R,x,y,angle);
//填充五角星路径
context.fill();
}
}
//建立五角星路径,下面有图示
function starPath(cxt,R,x,y,angle){
//beginPath()新建路径
cxt.beginPath();
//五角星有10个顶点,循环设置顶点,顶点见图示
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((72*i+angle)*Math.PI/180)*R+x,Math.sin((72*i+angle)*Math.PI/180)*R+y);
// 在这里使用小圆半径为大圆的一半,两个圆见图示
cxt.lineTo(Math.cos((72*i+36+angle)*Math.PI/180)*R/2+x,Math.sin((72*i+36+angle)*Math.PI/180)*R/2+y);
}
//closePath()闭合路径
cxt.closePath();
}
</script>
</body>
</html>
下面贴出五角星路径的构造图:
五角星每两个个外顶点和内顶点与中心连线的夹角都为72°,我们引入坐标轴和三角函数进行计算。
每个外顶点坐标为(cos(72*i)*R,sin(72*i)*R)(i=1,2,3,4,5)
每个内顶点在相邻外顶点的基础上偏移36°,
坐标可以这么写(cos(72*i+36)*R,sin(72*i+36)*R)(i=1,2,3,4,5),
也可以这么写(cos(72*i-36)*R,sin(72*i-36)*R)(i=1,2,3,4,5)
因为js中的三角函数是弧度制,角度转弧度的公式为:arc=angle/180*Math.PI
上述即是星空的完整绘制过程。