当前位置：首页 > JavaScript

js实现图片渐变效果

2026-03-01 10:14:27JavaScript

使用CSS3实现图片渐变叠加

通过CSS的linear-gradient或radial-gradient可以轻松实现图片上的渐变叠加效果。这种方法不需要JavaScript，性能更优：

<div class="gradient-overlay"></div>

.gradient-overlay {
  background-image: 
    linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0)),
    url('your-image.jpg');
  width: 100%;
  height: 300px;
  background-size: cover;
}

Canvas绘制渐变效果

通过HTML5 Canvas可以实现更复杂的渐变效果：

js实现图片渐变效果

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

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;

  // 绘制原始图片
  ctx.drawImage(img, 0, 0);

  // 添加渐变
  const gradient = ctx.createLinearGradient(0, 0, img.width, 0);
  gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
  gradient.addColorStop(1, 'rgba(0,0,255,0.5)');

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

img.src = 'your-image.jpg';

动态渐变过渡效果

使用JavaScript动态改变CSS变量实现渐变动画：

js实现图片渐变效果

.image-container {
  --gradient-color: rgba(255,0,0,0.5);
  background-image: 
    linear-gradient(to right, var(--gradient-color), transparent),
    url('your-image.jpg');
  transition: --gradient-color 0.5s ease;
}

const container = document.querySelector('.image-container');
let hue = 0;

function updateGradient() {
  hue = (hue + 1) % 360;
  container.style.setProperty(
    '--gradient-color', 
    `hsla(${hue}, 100%, 50%, 0.5)`
  );
  requestAnimationFrame(updateGradient);
}

updateGradient();

SVG滤镜实现渐变

使用SVG滤镜可以创建更复杂的渐变效果：

<svg width="0" height="0">
  <defs>
    <filter id="gradientFilter" x="0" y="0" width="100%" height="100%">
      <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/>
      <feComposite in="flood" in2="SourceGraphic" operator="over"/>
    </filter>
  </defs>
</svg>

<img src="your-image.jpg" id="filtered-image">

document.getElementById('filtered-image').style.filter = "url('#gradientFilter')";

WebGL高级渐变效果

对于需要高性能、复杂渐变效果的场景，可以使用WebGL：

// 初始化WebGL上下文
const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');

// 创建着色器程序
const vertexShaderSource = `...`;
const fragmentShaderSource = `
  precision mediump float;
  varying vec2 vTextureCoord;
  uniform sampler2D uSampler;

  void main() {
    vec4 textureColor = texture2D(uSampler, vTextureCoord);
    float gradient = vTextureCoord.x; // 从左到右渐变
    vec4 gradientColor = vec4(1.0, 0.0, 0.0, 0.5) * gradient;
    gl_FragColor = textureColor + gradientColor;
  }
`;

// 编译着色器、创建程序、设置缓冲区等WebGL常规操作
// ...

每种方法适用于不同场景：CSS渐变最简单，Canvas适合动态效果，SVG滤镜支持复杂操作，WebGL提供最高性能。选择时需考虑浏览器兼容性和性能需求。