如何在 JavaScript 中旋转色调

Question

我看到 here 一个从 -360 到 360 的 spin 函数，这对我来说没有意义，我认为它会从0-360.

我想扩展补色、三元组和四元组（它们内置于另一个库中）的概念，并生成一个相当于调色板的任意 n 边形，所以五元组、六元组、七元组、等。我尝试简单地做 angle * position 来获得五元组，但是 5 种颜色中有 2 种是重复的（这是因为我从 0-360 开始）。

不确定如何让它工作。

Answer 1

它允许您进行从 -360 度到 360 度的旋转，尽管其中很多是相同的，因为它们都是您在概念上使用的值。所以 -20 度的色调是有意义的，+340 度的色调也是有意义的，即使它们是同一回事。

var tc = tinycolor({
  r: Math.floor(Math.random() * 0xFF),
  g: Math.floor(Math.random() * 0xFF),
  b: Math.floor(Math.random() * 0xFF)
})
colors = []
var parts = 2 + Math.floor(Math.random() * 5);
for (var i = 0; i < parts; i++) {
  tc = tc.spin(360 / parts);
  colors.push('#' + tc.toHex())
}

div = document.createElement("div");
document.body.appendChild(div);
colors.forEach(function(element) {
  var d = document.createElement("button");
  d.style.cssText = 'padding:5px; font-size:22px; width:50px; height:50px; background-color:' + element;
  div.appendChild(d);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何在 JavaScript 中旋转色调

How to rotate hue in JavaScript

javascript

colors

rotation