在学会绘制圆后,会发现Canvas并没有直接提供绘制多边形的方法,由于绘制圆是利用数学公式来实现的,所以我们可以利用三角函数来计算并绘制多边形。

比如绘制一个五边形,首先算出5变形5个点的位置,然后使用lineTo连接起来,在填充即可。

<select id="num" onclick="changeAngle(this)" style="border:1px solid #ccc;color:#444;float:left;">
    <script>
        for(var i=3;i<=10;i++){
            document.write("<option value='"+i+"'>生成"+i+"边形</option>");
        }
    </script>
</select>
<canvas id="canvas" width="300" height="300" style="display:block;margin:0 auto;border:1px solid #ccc;"></canvas>
``` 获取5个点后,先把存到一个数组里面,然后遍历数组连接线段。

  

<script> var canvas = document.getElementById('canvas'); var cxt = canvas.getContext('2d'); var num = document.getElementById('num').value; var margin = 100;开始创建 function changeAngle(e){//改变多边形边数 num = e.value; create(); } //创建多边形 function create(){ //清除图形 cxt.clearRect(0,0,canvas.width,canvas.height); var line = []; for(var i=0;i<num;i++){ //计算角度 = π*2 / 边数 * 第几个位置 var angle = Math.PI*2/num *i; //将选择的多边形每个点的位置储存到数组 使用数学cos和sin计算角的弧度 line.push([canvas.width/2+Math.cos(angle)*margin,canvas.height/2+Math.sin(angle)*margin]); } cxt.beginPath();//开始绘制新的线路 for(var i=0;i<line.length;i++){ cxt.lineTo(line[i][0],line[i][1]);//绘制该多边形的所有点 } cxt.fill();//填充 cxt.closePath();//关闭线段 } </script>

```

在线Demo地址:

【七空幻音】Canvas生成多边形