H5-Canvas-Geometry-shapes-正多边形

正多边形绘制

今天上网的时候无意中看到好多几何图形，突然萌生出自己搞个生成器去绘制各种多边形，想想就开干了，先从简单的正多边形开始。

如下：

正多边形绘制实现

支持最少边数：3，最大：不限制；

支持链式重复绘制，从而可以组合成稍复杂点的图像；

支持单图形动画（顺时针，逆时针，顺逆时针互切，更多的动画有待完善）；

绘制对象：

// regular-polygon.js

function RegularPolygon( canvas ) {
   

    this.ctx = canvas.getContext('2d');

    this.canvasWidth = canvas.width;
    this.canvasHeight = canvas.height;

    // 多边形边数，默认 3，即三边形
    this._sides = 4;

    // 默认多边形半径为画布宽高一半
    this._r = canvas.width / 2;

    // 图像样式
    this._styles = {};

    // 图像旋转的角度
    this.rad = 0;

    // 绘制时是否旋转角度
    this.isRotate = false;

    // 顺时针
    this.isClockwise = true;

    // 旋转模式
    this.isRoundBack = false;

    // 旋转状态
    this.isPaused = true;

    // 旋转动画计时器
    this.rotateTimer = 0;
}

绘制函数：draw

该函数是该程序的核心，负责绘制多边形和渲染。

1. 先根据要绘制的图像边数（通过 this.sides(n) 设置，不设置时默认是三角形）；
2. 设置正多边形的外圆半径（通过 this.r(r) 默认为画布宽的一半）；
3. 然后分割外圆，通过 this.getXYs() 得到所有左边点；
4. 在 this.draw() 里面进行绘制路径即可。