通过 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、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。