javascript - 如何在 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>