Canvas实现雷达图效果

一、使用Canvas实现原理

这里最难的就是坐标系旋转后的坐标使用。其他就是利用数学公式等计算一些数据。

还有就是一步一步的调试，最终才能实现想要的效果。

如果光看已经完成的代码可能体会不到具体的逻辑关系，实现了效果后就是对代码的不断优化。

• 绘制图形部分代码```
  painting() {
  this.ctx.restore()
  this.ctx.clearRect(0, 0, this.canvasInfo.width, this.canvasInfo.height)
  this.ctx.save()
  this.ctx.translate(this.centerX, this.centerX)
  this.ctx.rotate(45 * Math.PI / 180)
  this.ctx.lineWidth = 0.7;
  this.ctx.strokeStyle = “#CACACA”;
  this.strokeRect(1, 1)
  this.strokeFillRect(4 / 5, 4 / 5, “#F6F8FC”)
  this.strokeFillRect(3 / 5, 3 / 5, “#FFFFFF”)
  this.strokeFillRect(2 / 5, 2 / 5, “#F6F8FC”)
  this.strokeFillRect(1 / 5, 1 / 5, “#FFFFFF”)
  this.strokeLine(-this.outX, -this.outX, this.outX, this.outX)
  this.strokeLine(-this.outX, this.outX, this.outX, -this.outX)
  let pData = this.strokeValueLine(0.5, 0.3, 0.7, 0.5, “#FF8E5E”)