0

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

谢谢!

4

2 回答 2

2

黑色是十六进制值#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。

于 2013-01-26T23:51:09.997 回答
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)

于 2013-01-27T00:06:42.150 回答