当前位置：首页 > JavaScript

用js实现渐变颜色转变

2026-03-01 20:45:40JavaScript

使用CSS线性渐变实现

通过JavaScript动态修改元素的background属性，结合CSS的linear-gradient实现渐变效果。以下示例展示从红色到蓝色的水平渐变：

const element = document.getElementById('gradient-box');
element.style.background = 'linear-gradient(to right, red, blue)';

动态颜色过渡动画

使用requestAnimationFrame实现颜色动态变化。以下代码实现从红色渐变到蓝色的动态效果：

let startColor = [255, 0, 0]; // 红色
let endColor = [0, 0, 255];   // 蓝色
let duration = 2000;          // 2秒
let startTime = null;

function animateGradient(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = Math.min((timestamp - startTime) / duration, 1);

    const currentColor = startColor.map((channel, i) => {
        return Math.round(channel + (endColor[i] - channel) * progress);
    });

    document.body.style.background = 
        `rgb(${currentColor.join(',')})`;

    if (progress < 1) {
        requestAnimationFrame(animateGradient);
    }
}

requestAnimationFrame(animateGradient);

使用Canvas绘制渐变

通过Canvas 2D API创建更复杂的渐变效果：

用js实现渐变颜色转变

const canvas = document.getElementById('gradient-canvas');
const ctx = canvas.getContext('2d');

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

多色渐变实现

创建包含多个颜色节点的渐变效果：

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const element = document.getElementById('rainbow');

let gradientStr = 'linear-gradient(to right, ';
gradientStr += colors.join(', ');
gradientStr += ')';

element.style.background = gradientStr;

径向渐变效果

实现圆形放射状渐变：

用js实现渐变颜色转变

const element = document.getElementById('radial-gradient');
element.style.background = 
    'radial-gradient(circle, rgba(255,0,0,1), rgba(0,0,255,1))';

响应式渐变调整

根据窗口大小动态调整渐变方向：

function updateGradient() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    const angle = Math.atan2(height, width) * (180 / Math.PI);

    document.body.style.background = 
        `linear-gradient(${angle}deg, red, blue)`;
}

window.addEventListener('resize', updateGradient);
updateGradient();

使用第三方库

对于复杂渐变效果，可以考虑使用chroma.js等颜色处理库：

// 需要先引入chroma.js库
const gradient = chroma.scale(['red', 'blue']).mode('lab');
document.getElementById('color-box').style.backgroundColor = gradient(0.5).hex();

以上方法提供了从简单到复杂的JavaScript渐变颜色实现方案，可根据具体需求选择合适的方式。CSS渐变适合静态效果，Canvas提供更多绘制控制，而JavaScript动画可实现动态过渡效果。