JS实现背景图的颜色实时渐变

在JavaScript中，可以使用HTML5 Canvas元素和其提供的createLinearGradient()方法来实现背景颜色的实时渐变。以下是一个简单的例子：

HTML部分：

<canvas id="gradientCanvas" width="400" height="400"></canvas>

JavaScript部分：

const canvas = document.getElementById('gradientCanvas');
const ctx = canvas.getContext('2d');
 
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'green');
 
function renderGradient() {
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}
 
renderGradient(); // 首次渲染渐变
 
// 可以添加逻辑来监听事件或者动态改变渐变，例如：
// window.addEventListener('resize', function() {
//   // 当窗口大小改变时，可能需要调整渐变的方向
//   gradient.direction = ...
//   renderGradient();
// });

这段代码创建了一个从红色到绿色的垂直渐变，并将其应用到了canvas元素的背景。你可以根据需要调整createLinearGradient()方法的参数来改变渐变的方向和路径。如果需要实时更新渐变，可以将渲染函数放在一个interval中，或者在某些用户交互事件中调用。