计算任意两个色彩的插值

理论利用中通常要计算两个色彩的之间插值后果，比方计算“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、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。