html5绘制随机五角星_脑残无极限，用HTML5 CANVAS画五角星！

(效果图)

当我开始研究HTML5的时候，canvas在第一时间就吸引住我了。哇塞，这东西未来绝对能取代WINDOWS的画图(小畫家)工具的！

于是本着探索的精神，我重新捡回了中学时期的三角函数，准备画个五角星。

当我快要做完的时候，我可爱的表妹在微博上嘲笑我啥都不会。

这无疑刺激我小宇宙爆发，一口气就做出来了！下面是代码

JS：

function can()

{

var a=document.getElementById('new_canvas');

var b=a.getContext('2d');

b.strokeStyle='#ccc';

b.lineWidth=0.5;

for (var i=0;i<48;i++)

{

for (var i2=0;i2<84;i2++)

{

b.strokeRect(i2*10, i*10, 10, 10);

}

}//做个网格，方便看看画得准不准

b.beginPath();//开始画了

b.lineWidth=1;

b.moveTo(420,140);//基本点

//偏移值计算开始

var x1=200*Math.tan(degreeToRaidus(18));

var y1=200;

var l=200*Math.sin(degreeToRaidus(72));

var x2=-200*Math.sin(degreeToRaidus(54));

var y2=-200*Math.sin(degreeToRaidus(36));

//偏移值计算结束

b.lineTo(420+x1, 140+y1);//右下点

b.lineTo(420+x1+x2, 140+y1+y2);//左上点

b.lineTo(420+x1+x2+l, 140+y1+y2);//右上点

b.lineTo(420-x1,140+y1); //右下点

b.lineTo(420,140);//返回原点

b.strokeStyle='black';//星星线条颜色

b.stroke();//把星星画出来

}

function degreeToRaidus(degree)

{

return degree*Math.PI/180;

}

HTML部分：

这里稍稍说明一下，can()是主绘图函数，负责绘制，绑定在BODY的ONLOAD上的.degreeToRaidus()是用来转换角度为弧度的(js只认弧度).

其实偏移值算了挺久的~~~~