javascript - 您将如何仅使用 Javascript（无 css）创建从黑色到白色的渐变？

Question

有什么帮助吗？我是 Javascript 新手。这只是我在网上看到的一个有趣的问题，我很好奇可能的解决方案。

谢谢！

Answer 1

黑色是十六进制值#000000，白色是#FFFFFF，为了方便起见，我们可以用十进制值将其表示为 RGB (0,0,0) 和 RGB (255,255,255)。

然后，您可以使用多种方法在 RG 和 B 之间以相等的量改变颜色值，从而创建一系列灰度颜色。

您可以在画布上执行此操作，甚至可以为每个像素使用一个 div，或者如果 CSS 不是一个选项，您可以只使用图像。每个像素使用 div 是一种选择，但在我看来真的不是一个很好的选择。

伪代码：

for i = 0 to 255 {
    create div 1/255th of the height of the container and set its background colour to RGB(i,i,i)
}

这样做的问题是您仍然必须使用 CSS，因为没有 DIV 样式就无法完成。

完全不使用 CSS 的唯一可能方法是使用图像。如果您想使用图像动态创建渐变，您甚至可以为每种灰度颜色设置图像并在 img 标签中使用这些图像。同样，您将无法使用背景图像等，因为这也是 CSS。

Answer 2

使用示例canvas：

var
  canvas = document.getElementById('gradient'),
  context = canvas.getContext('2d'),
  gradient = context.createLinearGradient(0, 0, 0, canvas.height);

gradient.addColorStop(0, '#ffffff');
gradient.addColorStop(1, '#000000');  

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

（演示）

或者通过用元素填充 DOM：http: //jsfiddle.net/UYxs7/1（技术上这是 CSS）