关于canvas画图，填充颜色，添加文字

直接上代码:

drawCanvas(point1, point2, point3, point4, name, fillStyle) {
      // console.log(point1.x);
      let _this = this;
      _this.ctx.beginPath();
      _this.ctx.moveTo(point1.x, point1.y);
      _this.ctx.lineTo(point2.x, point2.y);
      _this.ctx.lineTo(point4.x, point4.y);
      _this.ctx.lineTo(point3.x, point3.y);
      _this.ctx.closePath();

      _this.ctx.fillStyle = fillStyle; //填充颜色
      _this.ctx.fill(); //填充
      if (name) {
        _this.ctx.font = "14px bold 黑体";
        // 设置颜色
        _this.ctx.fillStyle = "#000";
        _this.ctx.fillText(name, point1.x, point1.y + 18);
      }
    },

因为我的项目需求只有四个点画图，且每个点都有自己的字段名，所以我没有用循环遍历画点，但是正常来说，可能画图的点存在数组里，直接遍历数组就行。

效果图