HSV 색상 선택기를 만들려고하는데 오버레이 이미지를 생성하는 방법을 알아낼 수 없습니다.

Question

제목에서 말한 것처럼 색상 선택기를 만들려고합니다 (HTML/CSS/JS, DuckDuckGo의 색상 선택 도구 (seen here)를 기반으로합니다.

div에 오버레이 된 반투명 이미지를 단색으로 사용합니다. 나는 그 이미지가 단지 수직의 흰색 -> 검은 색 그라디언트이고, 가로는 과의 수직 불투명도 그라디언트라고 생각했다. 그것은 그것보다 더 복잡한 것으로 밝혀졌습니다.

색상 선택 도구에서 사용하는 이미지를 다운로드하고 알파 채널을 제거했습니다. 나는 그것을 여기에 올렸다. 그건 그렇고, 그들은 약간의 이유로 그것 위에 미묘한 소음이있는 것으로 보입니다.

나는이를 생성하는 데 사용됩니다 어떤 식 모른다.
알파 채널이 1 - (x * y)과 같은 것을 알고 있지만, 어떤 알고리즘이 rgb 채널을 얻는 데 사용되는지 알지 못합니다.

HSL 색상 선택기에 대해서도 비슷한 이미지를 생성하고 싶습니다. 나는 동일한 알고리즘을 사용한다고 가정하지만, 수직으로 반으로 축소되고 미러링됩니다. 그 맞습니까?

Answer 1

해결했습니다.

오른쪽의 흰색을 흰색으로 투명하게 (rgba (255,255,255,0)) 그 레이디 언트 그라데이션을 그린 다음 아래쪽에 단색 검정색에서 투명한 검정색으로가는 알파 블랜딩을 사용하여 맨 위에 다른 그래디언트를 그립니다 상단에. 내가 대신 알파 블렌딩의 혼합 곱셈 사용했기 때문에 나는 그것을 알아낼 수없는 이유가 있었다 자바 스크립트 캔버스

var ctx = document.getElementByID("canvas").getContext("2d"); 

var saturationGradient = ctx.createLinearGradient(0, 0, 256, 0); 
saturationGradient.addColorStop(0, "rgba(255, 255, 255, 1)"); //white 
saturationGradient.addColorStop(1, "rgba(255, 255, 255, 0)"); //white transparent 
var valueGradient = ctx.createLinearGradient(0, 0, 0, 256); 
valueGradient.addColorStop(0, "rgba(0, 0, 0, 0)"); //transparent 
valueGradient.addColorStop(1, "rgba(0, 0, 0, 1)"); //black 

ctx.fillStyle = saturationGradient; 
ctx.fillRect(0, 0, 256, 256); 
ctx.fillStyle = valueGradient; 
ctx.fillRect(0, 0, 256, 256); 

를 사용

예제 코드.

그래도 HSL 색상 선택기에 대한 그래디언트 세트를 찾지 못했습니다.