通過canvas可以協助我們做很多顏色計算的輔助，比如顏色轉換，漸變顏色計算。

對於顏色轉換，之前寫過一篇文章：《通過canvas轉換顏色為RGBA格式及效能問題》
, 讀者可以查閱該篇文章來了解。
本文著重講解漸變計算顏色的插值計算。

計算任意兩個顏色的插值

實際應用中通常要計算兩個顏色的之間插值結果，比如計算“red”和“green” 之間的插值。 比較通用的方法就是首先通過《通過canvas轉換顏色為RGBA格式及效能問題》中提到的方法把顏色轉換成RGBA格式，由於RGBA格式是都是數字的形式，可以直接進行插值運算。大致的程式碼如下：

let rgba1 = getRgba('red'),
  rgba2 = getRgba('green');
let result = interpolate(rgba1,rgba2,0.5);
 

除此之外，還可以通過canvas的線性漸變來計算兩個顏色之間的插值。 首先，我們知道canvas中支援一種漸變叫LinearGradient。

建立線性漸變的函式是:

context.createLinearGradient(xStart,yStart,xEnd,yEnd)

其中引數(xStart,yStart)表示漸變的起始點,(xEnd,yEnd)的表示漸變的終止點。該函式會返回一個線性漸變物件。如下：

var grd = ctx.createLinearGradient(100,100,500,100)

漸變物件上面有一個可以新增顏色點的函式:

grd.addColorStop(stop,color);
 

這裡的stop傳遞的是 0 ~ 1 的浮點數，代表點到(xStart,yStart)的距離佔整個漸變長度是比例。

有關線性漸變的更多知識，可以參考：https://xiaozhuanlan.com/topic/5473801692

我可以得出，實現漸變顏色插值計算得思路大致如下：

• 首先建立一個canvas，指定canvas得寬度為100（根據漸變得精細度可以調整），高度為1
• 然後建立一個線性漸變物件，線性漸得尺寸和canvas尺寸保持一致，通過addColorStop新增顏色點，stop為0的時候新增第一種顏色，stop為1的時候新增第二種顏色。
• 插值計算出插值顏色所在的位置，通過canvas的getImageData方法獲取。

大致程式碼如下：

  var canvas = document.createElement("canvas");
    canvas.width = 100;
    canvas.height = 1;
   var ctx = canvas.getContext('2d');
   var grd = ctx.createLinearGradient(0,1,100,1)
function getInterpolateColor(color1,color2,r) {
      grd.addColorStop(0,color1);
      grd.addColorStop(1,color2);
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, 100, 1);
      var x =  parseInt(r * 100);
      var colorData = ctx.getImageData(x, 0, 1, 1).data;
      return {
          r: colorData[0],
          g: colorData[1],
          b: colorData[2],
          a: colorData[3]
      };
  }

上面程式碼使用了getImageData方法，有關getImageData的說明，可以參考：https://xiaozhuanlan.com/topic/5473801692

注意效能問題

參考《通過canvas轉換顏色為RGBA格式及效能問題》

歡迎關注公眾號“ITman彪叔”。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript、Python語言，熟悉資料庫。熟悉java、nodejs應用系統架構，大資料高併發、高可用、分散式架構。在計算機圖形學、WebGL、前端視覺化方面有深入研究。對程式設計師思維能力訓練和培訓、程式設計師職業規劃有濃厚興趣。