【JavaScript】使用canvas随机生成类似gitLab（github）对称几何头像

一.算法分析

头像分成4个小正方形，这四个小正方形图案只是通过旋转构成。
每个小正方形中有四个图案，构建这四个图案。
那么就可以通过两个for循环，外循环为旋转，内循环来绘制图案。

二.模型构建分析：

1.以头像中心为原点，水平为x轴，垂直为y轴建系。

1.xy轴将头像分成4个部分，可以很明显看出，头像可以由任意一个1/4图形旋转构成。
观察1/4图形（也就是一个象限）的形状。

2.以第一象限为例，同样划分成4个小正方形

在这些小正方形去构建图形，这里我们以构建三角形为例。
我的解决方案是：将正方形划分成25个点，每次选取三个点去构成三角形。

这样通过两个嵌套的for循环，就能够完成头像的绘制。

三.使用canvas进行绘制

//position为坐标的封装类
class position {
   
    constructor(x = null, y = null) {
   
        this._x = x;
        this._y = y;
    }
    init() {
   
        this.x = Math.floor(Math.random() * 5);
        this.y = Math.floor(Math.random() * 5);
    }
    toString() {
   
        return '(' + this.x + ', ' + this.y + ')';
    }
    get x() {
   
        return this._x;
    }
    get y() {
   
        return this._y;
    }
    set x(x) {
   
        this.<