js实现颜色阶梯渐变效果(Gradient算法)

前端之家收集整理的这篇文章主要介绍了js实现颜色阶梯渐变效果(Gradient算法)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

html中颜色可以使用rgb和hex方式来表示。

在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。

其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0)。

其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600)。因此我们可以将16进制转换为rgb单个进行梯级运算在进行组合。

已知:RStart=50,REnd=200,RStart、REnd之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少。

公式:Gradient = RStart+ (REnd-RStart) / Step * N (第N步的颜色rgb中R的值)

实现方法非常简单,只是需要将颜色从rgb到hex的互转。

实现代码

输出 alert(gradient);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/js/40556.html

猜你在找的JavaScript相关文章