当前位置：首页 > JavaScript

js实现渐变

2026-02-01 14:02:12JavaScript

实现 CSS 渐变效果

在 JavaScript 中实现渐变效果通常需要结合 CSS 的渐变属性。以下是几种常见的渐变实现方式：

线性渐变

通过修改元素的 background 属性实现线性渐变：

const element = document.getElementById('targetElement');
element.style.background = 'linear-gradient(to right, #ff0000, #0000ff)';

径向渐变

使用径向渐变创建圆形渐变效果：

element.style.background = 'radial-gradient(circle, #ff0000, #0000ff)';

角度渐变

指定渐变角度：

js实现渐变

element.style.background = 'linear-gradient(45deg, #ff0000, #0000ff)';

动态渐变效果

颜色过渡动画

使用 CSS 动画实现渐变颜色过渡：

element.style.animation = 'gradientAnimation 5s infinite';

对应的 CSS 定义：

@keyframes gradientAnimation {
  0% { background: linear-gradient(to right, red, yellow); }
  50% { background: linear-gradient(to right, yellow, blue); }
  100% { background: linear-gradient(to right, blue, red); }
}

交互式渐变

根据用户交互动态改变渐变：

js实现渐变

document.addEventListener('mousemove', (e) => {
  const xPercentage = (e.clientX / window.innerWidth) * 100;
  element.style.background = `linear-gradient(${xPercentage}deg, red, blue)`;
});

Canvas 渐变实现

使用 Canvas API 创建更复杂的渐变效果：

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

// 线性渐变
const linearGradient = ctx.createLinearGradient(0, 0, 200, 0);
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(1, 'blue');
ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 200, 200);

// 径向渐变
const radialGradient = ctx.createRadialGradient(100, 100, 10, 100, 100, 100);
radialGradient.addColorStop(0, 'white');
radialGradient.addColorStop(1, 'black');
ctx.fillStyle = radialGradient;
ctx.fillRect(0, 0, 200, 200);

SVG 渐变实现

通过 JavaScript 动态创建 SVG 渐变：

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");

gradient.setAttribute("id", "svgGradient");
gradient.setAttribute("x1", "0%");
gradient.setAttribute("y1", "0%");
gradient.setAttribute("x2", "100%");
gradient.setAttribute("y2", "0%");

const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
stop1.setAttribute("offset", "0%");
stop1.setAttribute("stop-color", "red");

const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
stop2.setAttribute("offset", "100%");
stop2.setAttribute("stop-color", "blue");

gradient.appendChild(stop1);
gradient.appendChild(stop2);
defs.appendChild(gradient);
svg.appendChild(defs);

document.body.appendChild(svg);

渐变颜色生成器

创建函数动态生成渐变颜色：

function generateGradient(color1, color2, steps) {
  const gradientColors = [];
  for (let i = 0; i <= steps; i++) {
    const ratio = i / steps;
    const r = Math.round(color1.r + (color2.r - color1.r) * ratio);
    const g = Math.round(color1.g + (color2.g - color1.g) * ratio);
    const b = Math.round(color1.b + (color2.b - color1.b) * ratio);
    gradientColors.push(`rgb(${r}, ${g}, ${b})`);
  }
  return gradientColors;
}

const color1 = { r: 255, g: 0, b: 0 }; // 红色
const color2 = { r: 0, g: 0, b: 255 }; // 蓝色
const gradient = generateGradient(color1, color2, 10);

标签: js