根据createLinearGradient结果获取rgb

1. 应用场景

在地图上使用 canvas 创建图例时，需要根据图里上的颜色标记地图上要素的颜色。因此需要获取 createLinearGradient或createRadialGradients上的颜色！

2. 代码实现

getGredientColor(){
      let mycanvas = document.createElement('canvas')
      mycanvas.style.height = '200px'
      mycanvas.style.width = '200px'
      var ctx = mycanvas.getContext("2d");
      var grd = ctx.createLinearGradient(0,0,200,0);
      grd.addColorStop(0.25, "#409EFF");
      grd.addColorStop(0.55, "#67C23A");
      grd.addColorStop(0.85, "#E6A23C");
      grd.addColorStop(1, "#F56C6C");
      ctx.fillStyle = grd;
      ctx.fillRect(0,0,200,50);
      let dataArr = []
      const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
      for(let i=0;i<200;i++){
          var pixelData = ctx.getImageData(200-i-1, 10, 1, 1).data;
          dataArr.push(rgbToHex(pixelData[0],pixelData[1],pixelData[2]))
      }
      return dataArr
    }

note: 默认创建一个 200px 200px宽高的 canvas 元素，然后使用线性渐变填充。返回一个长度为200的数据，如下

[ ‘#f56d6b’, ‘#f46e69’, ‘#f47068’, ‘#f37266’, ‘#f37465’, ‘#f27663’, ‘#f27861’, ‘#f17960’,…]

3. 根据最大/小值映射色带

getRelatedColor(max,min,value,valueArr){
   let index = parseInt((value - min) / (max- min) * 200)
   if(valueArr[index]){
     return valueArr[index]
   }else{
     return valueArr[valueArr.length - 1]
   }
}