前面《好玩的Canvas：直线（线段）、图形的绘制》一文讲述了Canvas绘制直线和矩形，本文将讲述如何绘制五角星，首先在纸上计算推导五角星五个坐标点：
然后我们可以看到五个角坐标规律，下面开始绘制：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘制五角星</title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
function get_dom(id){
return document.getElementById(id);
}
//canavs绘制五角星
//中心点坐标(x0,y0)
//m,h五角星中心点到凸角和凹角的长度，使m大小接近于2*h
function create_5(cxt,x0,y0,m,h){
var a = 18;
var b = 54;
cxt.beginPath();
for(i=0;i<5;i++){
cxt.lineTo( m*Math.cos((a+i*72)*Math.PI/180)+x0, m*Math.sin((a+i*72)*Math.PI/180)+y0 );
cxt.lineTo( h*Math.cos((b+i*72)*Math.PI/180)+x0, h*Math.sin((b+i*72)*Math.PI/180)+y0 );
}
cxt.closePath();
cxt.stroke();
}
var canvas = get_dom("canvas");
var cxt = canvas.getContext("2d");
create_5(cxt,100,100,100,50);
</script>
</html>效果如下：
留言
很酷…我只会搜索到你这样的网页，然后 Ctrl C/V…
可以，我也喜欢这种操作。