(效果图)
当我开始研究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只认弧度).
其实偏移值算了挺久的~~~~
