专栏首页计算机图形学 前端可视化 WebGL通过canvas计算任意两个颜色的插值

通过canvas计算任意两个颜色的插值

通过canvas可以协助我们做很多颜色计算的辅助,比如颜色转换,渐变颜色计算。本文着重讲解渐变计算颜色的插值计算。

计算任意两个颜色的插值

实际应用中通常要计算两个颜色的之间插值结果,比如计算“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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 高清屏下canvas重置尺寸引发的问题

    我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数:

    用户3158888
  • 简化一段javascript代码

    在实际的项目中,我们经常会有如下的需求: 从一个map中获取某key的值,如果发现对应的key的值为null,则为该key创建一个值(一般为初始值),然后把这个...

    用户3158888
  • 通过canvas转换颜色为RGBA格式及性能问题 注意性能问题

    前端编程过程中,经常会遇到要把各种颜色格式(比如 “red”、“#F00”、“#FF0000”等)转换成RGBA格式,搜索网络也可以发现一堆的解决方案:

    用户3158888
  • Mysql锁

    锁的应用最终导致不同事务的隔离级别、而MVCC多版本并发控制,通过增加版本的形式实现两种隔离级别(不使用到锁),MVCC读写不阻塞,是行级锁的升级

    晚上没宵夜
  • 又陷入知识盲区了,面试被问Redis事务,我差点脸都“绿”了

    前几天有读者说自己面试被问到Redis的事务,虽然不常用,但是面试竟然被问到,平时自己没有注意Redis的事务这一块,面试的时候被问到非常不好受。

    Java程序猿阿谷
  • CVE-2020-7471 漏洞详细分析原理以及POC

    这几天疫情爆发,只能待在家里为社会多做些贡献,一天深夜无意逛安全资讯的时候发现最新的一个漏洞:CVE-2020-7471 Potential SQL injec...

    C4rpeDime
  • Redis:17---常用功能之(事务)

    根据文档记录,在Redis 2.6.5以前的版本,即使有命令在入队过程中发生了错误, 事务一样可以执行,不过被执行的命令只包括那些正确入队的命令,...

    用户3479834
  • 不支持原子性的 Redis 事务也叫事务吗?

    为了确保连续多个操作的原子性,我们常用的数据库都会有事务的支持,Redis 也不例外。但它又和关系型数据库不太一样。

    海星
  • 【玩转Redis面试第2讲】面试官再问Redis事务把这篇文章扔给他

    原子性:一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节。事务在执行过程中发生错误,会被恢复(Rollbac...

    爱笑的架构师
  • 如何实现微服务架构下的分布式事务

    事务是由一组SQL语句组成的逻辑处理单元,事务具有以下4个属性,通常简称为事务的ACID属性:

    kubernetes中文社区

扫码关注云+社区

领取腾讯云代金券