关于 chroma.js

介绍

我写了关于 chroma.js,一个可以处理颜色的 Javascript 库,所以我写了内容与官方文档相差不大

概述 您可以轻松创建库和颜色图,从而更轻松地使用 Javascript 处理颜色。

文档和主页

Github

许可证似乎有点特别。

包含 Apache2.0 许可的颜色吗?你可能想在这里更小心一点

安装 用于 npm
npm install chroma-js
import chroma from "chroma-js";
CDN 网址
https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js
尝试基本功能

根据文档

可以读取各种格式的颜色 颜色分析和处理 将颜色转换为不同的格式 允许在不同颜色空间中进行线性和贝塞尔插值

接着就,随即

一个简单的读/操作/输出链的例子

const col = chroma('pink').darken().saturate(2).hex();
console.log(col);
"#ff6d93"

这是,粉红色,较暗,饱和度约为 2,十六进制命令

它还可以以各种方式使用(例如,) 可以产生漂亮的颜色

接着就,随即

const cols = chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6);
console.log(cols);
["#fafa6e","#9cdf7c","#4abd8c","#00968e","#106e7c","#2a4858"]

这是,在 LCH 颜色空间中创建从 #fafa6e 到 #2A4858 的 6 级色阶命令

关于 LCH

各种色彩空间

顺便说一下,你可以大致指定这样的东西

const output = document.getElementById('output');

const cols = chroma.scale(['blue', 'green', 'yellow', 'red']).mode('lab');
for( var i = 0; i <=1; i = i + 0.1) {
  output.innerHTML += 
      "<div class='color' style='background-color: " + cols(i) + ";'></div>"
}

上面的操场

哪怕只是轻轻一点,也能做各种与颜色有关的事情。

如果你有色彩空间的知识,你就能更好地使用它,所以你需要多学习一点。 . .

我想

原创声明:本文系作者授权爱码网发表,未经许可,不得转载;

原文地址:https://www.likecs.com/show-308628375.html

39人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册