直接上代码:
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);}},
因为我的项目需求只有四个点画图,且每个点都有自己的字段名,所以我没有用循环遍历画点,但是正常来说,可能画图的点存在数组里,直接遍历数组就行。