在学会绘制圆后,会发现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生成多边形