通过canvas可以协助我们做很多颜色计算的辅助，比如颜色转换，渐变颜色计算。本文着重讲解渐变计算颜色的插值计算。
计算任意两个颜色的插值
实际应用中通常要计算两个颜色的之间插值结果，比如计算“red”和“green” 之间的插值。 比较通用的方法就是首先通过《通过canvas转换颜色为RGBA格式及性能问题》中提到的方法把颜色转换成RGBA格式，由于RGBA格式是都是数字的形式，可以直接进行插值运算。大致的代码如下：
代码语言：javascript复制let rgba1 = getRgba('red'),
rgba2 = getRgba('green');
let result = interpolate(rgba1,rgba2,0.5);除此之外，还可以通过canvas的线性渐变来计算两个颜色之间的插值。 首先，我们知道canvas中支持一种渐变叫LinearGradient。
创建线性渐变的函数是:
代码语言：javascript复制context.createLinearGradient(xStart,yStart,xEnd,yEnd)其中参数(xStart,yStart)表示渐变的起始点,(xEnd,yEnd)的表示渐变的终止点。该函数会返回一个线性渐变对象。如下：
代码语言：javascript复制var grd = ctx.createLinearGradient(100,100,500,100)渐变对象上面有一个可以添加颜色点的函数:
代码语言：javascript复制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方法获取。
大致代码如下：
代码语言：javascript复制 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
