Canvas画正多边形，正多角形

1.画多边形

var myCanvas = document.getElementById("myCanvas");
var context =  myCanvas.getContext("2d");

let n = 5,//边数,这里默认五边形
degree = 1,//偏移角度，这里是角度，方便理解
ang = Math.PI*2/n,//旋转的角度
radius = 20;//半径，确切的说是中心点到角的距离

//translate之后目标的坐标系以该点为原点
//所以先保存方便事后还原
context.save();
//x,y指的中心点的坐标
context.translate(x, y);

//偏移角度得转弧度
let radianDegree = (degree*Math.PI)/180;
//旋转过后坐标系的角度会被调整，然后可以在x轴的调整数字为0
context.rotate(radianDegree);
//根据角度计开始绘制点的位置
context.moveTo(0, - radius);//据中心r距离处画点
context.beginPath();
for(var j=0;j<n;j++){
    //通过旋转修改坐标系
    context.rotate(ang);//旋转
    context.lineTo(0,-radius);
}
//封边 要在画图之前执行
context.closePath();
//画圆
context.stroke();
//填充，颜色得提前设置
context.fill();

//配置还原
context.restore();

1.画多角形（五角或以上）

var myCanvas = document.getElementById("myCanvas");
var context =  myCanvas.getContext("2d");

/**
* count角数
* radius半径 控制大小的
* degree调整角度，微调角在圆的位置
* x,y 控制中心点也就是位置的
*/
drawStar(count,radius,degree,x,y) {
//设置填充色
    context.fillStyle = "#000000";
    //设置描边颜色
    context.strokeStyle = "#000000";
    //设置线宽
    context.lineWidth = 1;
    //每次转动的角度
    //为画多边形转动角度的一半
    let ang = Math.PI/count;
    //translate之后好像目标的坐标系以该点为原点
    //所以先保存
    context.save();
    context.translate(x, y);
    //度数得转弧度
    //根绝微调角度旋转坐标轴
    context.rotate((degree*Math.PI)/180);
    //开始绘制
    context.beginPath();
    for(var j=0; j<count*2; j++){
        //通过旋转修改坐标系
        context.rotate(ang);//旋转
        let r = radius;
        if(j%2==0){
            //这个计算过程没有精简，数学不是太好
            //我这边是通过角度计算的点的位置
            let deg1 = Math.PI/count,
            deg2 = (Math.PI/2) - deg1;
            r =r*Math.cos(ang) - (r * Math.sin(ang) * Math.cos(deg2))/ Math.sin(deg2);
        }
        context.lineTo(0, -r);
    }
    context.closePath();
    context.stroke();
    context.fill();

    context.restore();
}

1577697543(1).png

最后编辑于：2020.01.04 11:53:41