有什么帮助吗?我是 Javascript 新手。这只是我在网上看到的一个有趣的问题,我很好奇可能的解决方案。
谢谢!
黑色是十六进制值#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。
使用示例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)