Question

目前，我正在为初学者美术课开发在线教育工具。为了可视化颜色的混合，我创建了3个可拖动的圆（RGB），用于在屏幕混合模式下混合光。

这有效！但是现在我想用3种原色（RYB）完成相同的操作，因此，如果我将黄色拖到红色上，我会得到橙色，蓝色到红色上会给我紫色，等等。我没有找到适合此目的的混合模式。这可能吗？

$(function() {
  $(".color-circle").draggable();
});

.color-circle-light {
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
  mix-blend-mode: screen;
  margin: 1rem;
}

.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: lime;
}

.bg-black {
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="bg-black">
  <div class="color-circle color-circle-light bg-red"></div>
  <div class="color-circle color-circle-light bg-green"></div>
  <div class="color-circle color-circle-light bg-blue"></div>
</div>

JSFiddle：https://jsfiddle.net/t0u2agc3/

将RYB颜色与混合混合模式混合

0 个答案: