画布----规则的多边形(三角形,正方形....)

左手的ㄟ右手 2021-09-15 15:04 212阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <canvas id="can"></canvas>
    </body>
    <script>
        var canvas = document.querySelector('#can');
        var c = canvas.getContext('2d');//作画的地方
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;//画布宽
        canvas.height = h;//画布高
        //定义一个以(x,y)为中心,半径为r的规则n边形
        //最后一个参数为true,逆时针旋转
        function polygon(c,n,x,y,r,angle,counterclockwise){
            angle=angle||0;
            counterclockwise=counterclockwise||false;
            c.moveTo(x+r*Math.sin(angle),y-r*Math.cos(angle));//从第一个顶点开始一条新的子路径
            var delta=2*Math.PI/n;//两个顶点之间的夹角
            for(var i=1;i<n;i++){//循环剩余的每个顶点
                angle+=counterclockwise?-delta:delta;//调整角度
                c.lineTo(x+r*Math.sin(angle),y-r*Math.cos(angle));//以下一个顶点为端点添加线段
            }
            c.closePath();//将最后一个顶点和起点连接起来
        }
        
        c.beginPath();//开始一条心的路径
        polygon(c,3,50,70,50);//三角形
        polygon(c,4,150,60,50,Math.PI/4);//正方形
        polygon(c,5,255,55,50);//五边形
        polygon(c,6,365,53,50,Math.PI/6);//六边形
        polygon(c,4,365,53,20,Math.PI/4,true);//六边形中的小正方形
    
        c.fillStyle="#ccc";//内部填充色
        c.strokeStyle="#008";//边框色
        c.lineWith=5;//线宽
        c.fill();//填充图形
        c.stroke();//勾勒外边框
    </script>
    
    </html>

![70][]

[70]: /images/20210726/b2621e9dad3a4aacb5a9f49d217eb9d8.png