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

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

1577697543(1).png