如何在html页面上获取特定部分的背景颜色

Question

我使用Gradient为我的html正文背景设置颜色。

CSS：

background: linear-gradient(to top,  #fb4080 10%,#ebb523 22%,#58d27c 40%,#2aff00 52%,#0fd2b7 65%,#6b6dff 80%,#ff05ea 100%);

现在身体充满了多种颜色。使用javascript如何获取页面特定部分的rgb或hex颜色代码值？

示例：

  

如果我滚动页面，我想获得顶部的颜色   页面（突出显示部分内部的颜色不完全，但靠近它的值）所以我可以将颜色代码分配/设置到我页面上的另一个元素，如导航栏，菜单等

有什么建议吗？

Answer 1

我可以在这里考虑以下选项：

1. 计算您应该能够使用的Javascript中的渐变 获取像素值 How to figure out all colors in a gradient?

2. 创建具有相同渐变的隐藏画布并选择像素 从这个画布 http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/

3. 使用Javascript的截图库并从中选择像素 截图数据。 Using HTML5/Canvas/JavaScript to take screenshots

Answer 2

只有画布和图像对象可以读取像素值。

除了使用CSS渐变之外，您还可以在页面主体后面创建画布，然后将渐变呈现到画布中。之后，您可以从画布中选择一种颜色。我的问题answer How to set an element's background as the same as a specific portion of web page中有一个完整的例子。