案例四、1.使用Canvas画一个五角星

在使用Cnavas元素画一个五角星时，最难的应该是五角星角的坐标。
首先在Canvas元素中，y轴是向下为正。
由于五角星有五个角，圆为360度，所以角与角之间的距离应该为72度。
此时的五角星的十个点的坐标当成是在内外两个圆上排列。读过高中的同学都应该明白图中标示出来的四个点的坐标是怎样算出来的。由于Canvas元素中y轴向下为正，所以sin的值为负。
然后开始画五角星的顶点，用一个循环就可以：

function drawStar(cxt, R, r, x, y){
//ctx为传入的上下文环境，R为外面大圆的半径，r为内部小圆的半径，x为五角星中心的横坐标，y为五角星中心的纵坐标。
for(var i = 0; i < 5; i ++){
ctx.beginPath();
ctx.fillStyle = “yellow”;
ctx.lineTo( Math.cos((18+i*72)/180*Math.PI)*R+x,
-Math.sin((18+i*72)/180*Math.PI)*R+y
);
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
-Math.sin((54+i*72)/180*Math.PI)*r+y
);
}
ctx.closePath();
ctx.fill();
}
由于Math.cos(),接受的是弧度值，所以我们需要将角度转换为弧度。即：
弧度值 = 角度/180*π；

切记：当我们要画一个封闭的图形时，beginPath()与closePath(),是必须要有的。
当我们想要让所画的五角星旋转一定的角度时，可以传进一个参数在上面的函数中。

function drawStar(cxt, R, r, x, y, a){
//ctx为传入的上下文环境，R为外面大圆的半径，r为内部小圆的半径，x为五角星中心的横坐标，y为五角星中心的纵坐标。a为旋转的角度
for(var i = 0; i < 5; i ++){
ctx.beginPath();
ctx.fillStyle = “yellow”;
ctx.lineTo( Math.cos((18+i*72-a)/180*Math.PI)*R+x,
-Math.sin((18+i*72-a)/180*Math.PI)*R+y
);
ctx.lineTo(Math.cos((54+i*72-a)/180*Math.PI)*r+x,
-Math.sin((54+i*72-a)/180*Math.PI)*r+y
);
}
ctx.closePath();
ctx.fill();
}
这样可以让所画的五角星有一个旋转角度，不再那么死板了。那么接下来考虑如果要画很多个大小不一的星星怎样画。