有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示:
如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图:
这时,就用到了同色系渐变颜色的计算,算法如下:
function getItemColors (colorLevel) {
var colors= [];
//默认的最深颜色
var red = 134,green = 108, blue = 184;
//最浅颜色是239,239,239 比如:最浅颜色的red是 239 则差值为239-134=105
var maxRed = 105,maxGreen = 131,maxBlue = 55;
var level = colorLevel;
while(level--) {
colors.push( 'rgb('+red +','+green+','+blue+')');
red += parseInt(maxRed/colorLevel);
green += parseInt(maxGreen/colorLevel);
blue += parseInt(maxBlue/colorLevel);
}
return colors;
}
改进版:
/**
* color1,color2 数组 ,行如[233,239,239] 分别为红 绿 蓝,对应rgb(73,238,343) 中的*三个颜色
*colorLevel 要返回的颜色个数
**/
function getItemColors (color1,color2,colorLevel) {
var colors= [];
//默认的最深颜色
var red = color1[0],green = color1[1], blue = color1[2];
//最浅颜色是239,239,239 比如:最浅颜色的red是 239 则差值为239-134=105
var maxRed = color2[0],maxGreen = color2[1],maxBlue = color2[2];
var level = colorLevel;
while(level--) {
colors.push( 'rgb('+red +','+green+','+blue+')');
red += parseInt(maxRed/colorLevel);
green += parseInt(maxGreen/colorLevel);
blue += parseInt(maxBlue/colorLevel);
}
return colors;
}
*&**&**&**&**&**&**&**&**&**&*喜庆的分割线*&**&**&**&**&**&**&**&**&**&**&**&*
马上就要结婚了,开心
- 大小: 5.8 KB
- 大小: 2.7 KB
- 大小: 3 KB
分享到:
相关推荐
在前端开发中,使用JavaScript来计算渐变颜色是非常实用的技能。 本文将详细探讨JavaScript如何计算渐变颜色,并提供具体的实例代码。我们将通过一个函数 `getItemColors` 来实现,它可以根据指定的颜色级别来生成...
在本文中,我们将探讨如何使用JavaScript来实现颜色的渐变效果,这是一个常见的视觉设计技巧,常用于网页背景、按钮、文字等多种元素。 颜色渐变通常涉及到RGB色彩模式,即红色(Red)、绿色(Green)和蓝色(Blue...
4. **脚本语言实现**:对于脚本语言,如JavaScript,可以利用canvas元素的绘图功能来实现颜色渐变,或者使用CSS3的动态修改能力,通过JavaScript控制颜色渐变动画。 在实现颜色渐变时,需要注意以下几点: 1. **...
使用这些源码,开发者可以学习如何在软件界面中应用渐变颜色,同时也可以直接将其整合到自己的项目中,以提升软件的视觉效果。对于初学者,这是一个很好的学习资源,了解如何通过编程技术实现界面美化。对于有经验的...
通过这个例子,你可以了解到如何使用JavaScript来操控网页元素的样式,以及如何实现颜色渐变效果。这个过程涉及到了颜色理论、JavaScript的DOM操作和时间函数。你可以根据需求调整颜色、渐变时间和颜色步进,以实现...
3. 设定一个总的执行次数,用以决定颜色渐变的步长; 4. 利用定时器按步长逐步更新颜色值; 5. 在颜色变化的最后一次将颜色直接调整到目标值。 需要注意的是,在代码实现时,我们通常需要考虑浏览器的兼容性以及...
例如,在Python的PIL库或JavaScript的Canvas API中都有相关的函数和方法来绘制颜色渐变。在3D图形中,颜色渐变直线的概念被扩展到了3D空间,用于表面着色和纹理映射。 总之,颜色渐变直线是计算机图形学中的基本...
该元素允许定义线性或径向渐变,并且可以指定颜色、透明度等属性。通过改变渐变的角度,即可实现动态的渐变效果。 #### 代码分析 1. **页面结构与样式**: - HTML 结构相对简单,包含了三个主要的 VML 元素:`...
在JavaScript的世界里,实现"提取图片颜色生成背景渐变"的功能是一种常见的图像处理技术,尤其在网页设计中,可以创建出独特的视觉效果。这个功能的核心在于解析图片的颜色信息,并利用这些信息来生成背景的渐变色。...
在JavaScript的世界里,创建动态和引人入胜的网页效果是一项常见的挑战,而"提取图片颜色生成背景渐变js代码.zip"就是一个解决此类问题的工具。这个压缩包包含了一个JavaScript代码示例,它能帮助开发者从一张图片中...
因此,在使用JavaScript实现颜色梯度时,应考虑优化代码,避免不必要的计算,并适时利用CSS3的能力。 7. **跨浏览器兼容性** 考虑到不同浏览器对CSS3和JavaScript的支持程度,开发时需确保渐变效果在主要浏览器上...
为了实现更复杂的渐变效果,如颜色渐变,可以利用CSS3的`linear-gradient`,但这种方法在JavaScript中实现可能会相对复杂,因为需要计算和设置多个颜色停止点。不过,可以通过创建和修改背景图像或者使用滤镜(如`...
需要注意的是,这种方法虽然不依赖外部图片,但是其性能开销要比直接使用CSS渐变效果大,因为需要通过JavaScript计算每一步的颜色,并且将其应用到具体的DOM元素上。另外,由于渐变效果是通过程序计算出来的,所以...
通过以上方法,您可以在Cesium中创建具有渐变颜色效果的多边形,无论是通过Canvas动态绘制还是使用预设的渐变图片。这两种方式各有优缺点,Canvas方式更加灵活,但可能消耗更多计算资源;而图片方式则易于实现,但...
7. **可配置性**:一个优秀的封装类应该允许开发者自定义一些参数,比如渐变颜色、提示框的样式、显示延迟时间等。这可以通过构造函数接收配置对象,或者提供相应的设置方法来实现。 8. **模块化**:为了适应现代...
`chroma.js`是一个小巧但功能强大的JavaScript库,专为颜色操作而设计。它提供了一套简洁的API,使得在JavaScript中处理颜色变得简单且直观。这个库尤其适合那些需要在网页或应用中进行颜色转换、调整、分析以及可视...
在IT行业中,创建一个自定义颜色渐变的仪表盘是一项常见的任务,特别是在数据可视化和UI设计领域。这种仪表盘能够以动态、直观的方式展示数据,为用户提供清晰的指标读取体验。下面我们将深入探讨如何实现这样的功能...
或者使用JavaScript动态计算和设置元素的样式,根据进度调整渐变位置。 总的来说,颜色渐变是软件开发中的一个重要技巧,它不仅可以提升用户体验,还能增加视觉吸引力。通过学习和理解这个压缩包中的源代码,开发者...