chroma抠像_如何使用Chroma.js在JavaScript中处理颜色

最新推荐文章于 2024-07-04 14:40:01 发布

daique1908

最新推荐文章于 2024-07-04 14:40:01 发布

阅读量1.1k

点赞数 1

文章标签： python javascript java js css ViewUI

chroma抠像

在今天的教程屏幕录像中，我将向您展示如何使用JavaScript操纵颜色。是的，JavaScript。不是CSS。让我们深入看看我在说什么！

观看截屏

我们都已经习惯了CSS处理样式，而JavaScript用于行为的想法，这两个方面应该分开。但是，当无法直接通过CSS定义样式时（例如通过用户输入进行设置），JavaScript将为您完成所有繁重的工作。

Chroma.js是一个很小的库，可以极大地帮助您处理颜色，因此让我们看看如何开始使用它。

把它挂起来

可以从Github上的仓库中提取色度，或使用以下链接从CDNJS链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>

演示版

看看我构建的快速演示，向您展示可能的方法。我们将构建一个颜色方案生成器，该颜色方案生成器将使用输入的颜色值并将其用于输出单色方案。

如果您想在重新创建演示时继续学习，请获取start.html文件（其中包含我们将要编写JavaScript以外的所有内容），然后在代码编辑器中将其打开。

首先在html文档底部的<script>标记之间添加以下代码块：

document.addEventListener('DOMContentLoaded', function() {
            
            var btnGenerateColorScheme = document.querySelector('#generate-color-scheme'),
                btnGenerateColorScale = document.querySelector('#generate-color-scale'),
                colorScheme = document.querySelector('.color-scheme'),
                colorScale = document.querySelector('.color-scale'),
                steps = 5, // is preferably an odd number
                chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList;
            
            btnGenerateColorScheme.addEventListener('click', function() {
               
            });

            btnGenerateColorScale.addEventListener('click', function() {
             
            });

        });

这是很大的一部分，但是比起初想像的要少得多！它以事件侦听器DOMContentLoaded开头，该事件侦听器将等到文档加载后再执行随后的任何功能。

接下来，我定义了一系列要使用的变量，从两个按钮开始，然后是colorScheme和colorScale容器，然后是steps （稍后将使用一个数字）。

最后，有两个click事件监听器，它们的功能为空（我们还没有），我们将从其中第一个开始，即btnGenerateColorScheme ，这是一个按钮（毫无疑问），它将生成一个配色方案。

btnGenerateColorScheme

在empty函数中，花括号之间，我们将从设置一个名为colorList的空数组colorList ：

// Reinitialize the color list.
                colorList = [];

当用户单击按钮时，我们要做的第一件事就是从#user-color输入中获取#user-color 。

// Get the color value.
                userColor = document.querySelector('#user-color').value;

然后，我们需要重置配色方案列表中的值。这是通过剥离.color-scheme元素的innerHTML来完成的，在本例中为<ol> 。在这里，您可以看到我们正在使innerHTML等于一个空字符串。

// Reset the content of the color scheme list.
                colorScheme.innerHTML = '';

叫色度

现在是有趣的部分！我们通过调用chroma()并传入颜色来初始化chroma.js库：

// Initialize Chroma.
                chromaColor = chroma(userColor);

我们的颜色是userColor ，这是我们从输入中拉出的值。

我们将基于所选颜色创建单色配色方案。由于以下for循环，我们将通过创建数组来完成此操作：

// Create a monchromatic color scheme.
                for (var i = 0; i < steps; i++) {
                    colorList[i] = chromaColor.darken(i);
                }

该循环遍历变量步骤中定义的steps （我们将其设置为5，记得吗？）。每次迭代时，都会向集合中添加稍暗的阴影。

最后，我们需要使用数组中的五个值生成一些元素。每次我们创建一个<li>元素时，根据我们的colorList提供一个backgroundColor ，然后将其附加到colorScheme 。

// Generate some elements.
                for (var j = 0; j < colorList.length; j++) {
                    var newItem = document.createElement('li');

                    newItem.style.backgroundColor = colorList[j];

                    colorScheme.appendChild(newItem);
                }