JavaScript는 색상을 16 진수로 모델링하지 않으며 시스템도 모델링하지 않습니다. 16 진 표기법은 사람이 읽을 수있는 문서를위한 것입니다. 내부적으로 시스템은 3 개의 정수 값을 저장합니다. 그것들을 직접 쿼리하고 조작 할 수 있습니다.
그러나 시스템 내부 대신 실제 문서를 조작한다고 가정 해 봅시다. 그런 다음 계산을 연기하는 일부 라이브러리로 연기하는 것이 가장 좋습니다. 브라우저는 여러 가지 방법으로 색상을 나타낼 수 있으므로 ad rgb 및 hsv 입력과 같은 모든 종류의 경우를 프로그래밍해야합니다. 따라서 Color.js 와 같은 것을 사용하는 것이 좋습니다. 혼합, 어둡게, 밝게 등을 직접 구현할 필요가 없으므로 많은 두통을 덜어줍니다.
편집 :
이 작업을 직접하고 싶을 때 권장하지 않습니다. hexarepresentation을 0-1 범위의 정수 또는 부동 소수점 숫자의 숫자 삼중으로 변환하여 시작하면 계산이 더 쉬워집니다.
이제 색상 변환 RGB 값을 HSL 또는 HSB로 쉽게 조작 할 수 있으므로 밝기 계산이 간단합니다 (Wikipedia에 공식화). 그런 다음 밝기 또는 밝기를 더하거나 뺍니다. 실제 조명 시뮬레이션의 경우 밝은 색상에 기본 색상을 곱하면 계산이 쉽습니다. 따라서 중립 빛의 경우 간단하게 :
결과 = 강도 * 색
라파엘이 설명했듯이 공식은 컬러 채널로 반복됩니다. 다음을 수행하여 컬러 조명을 시뮬레이션 할 수 있습니다
결과 = 강도 * LigtColor * 색상
플로팅으로 변환하는 것이 가장 좋으며 선형 일 수도 있습니다. 이것은 당신의 지역에서 따뜻하고 시원한 빛을 허용하여보다 자연스러운 느낌을 줄 수 있습니다.
알파 블렌딩 (다른 색상의 레이어 이미지)은 간단합니다.
결과 = ColorTop * alpha + ColorBottom * (1-alpha)
최종 편집
마지막으로 여기에 당신이 요구하는 것에 뭔가를하는 코드가 있습니다. 이것이보기 어려운 이유는 현재 추상적 인 형태이기 때문입니다. 여기에서 사용 가능한 라이브 코드
이미지 1 : 아래 코드 결과는 라이브 버전 도 참조하십시오 .
{
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var Color = function(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
Color.prototype.asHex = function() {
return "#" + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
}
Color.prototype.asRGB = function() {
return 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')';
}
Color.prototype.blendWith = function(col, a) {
r = Math.round(col.r * (1 - a) + this.r * a);
g = Math.round(col.g * (1 - a) + this.g * a);
b = Math.round(col.b * (1 - a) + this.b * a);
return new Color(r, g, b);
}
Color.prototype.Mul = function(col, a) {
r = Math.round(col.r/255 * this.r * a);
g = Math.round(col.g/255 * this.g * a);
b = Math.round(col.b/255 * this.b * a);
return new Color(r, g, b);
}
Color.prototype.fromHex = function(hex) {
// http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
hex = hex.substring(1,7)
var bigint = parseInt(hex, 16);
this.r = (bigint >> 16) & 255;
this.g = (bigint >> 8) & 255;
this.b = bigint & 255;
}
ctx.font = "16px Arial";
ctx.fillText("Manual Alpha Blend", 18, 20);
var a = new Color(220, 0, 150);
var b = new Color();
b.fromHex('#00C864');
//Alpha blend
ctx.fillStyle = a.asHex();
ctx.fillRect(25, 25, 100, 100);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(a.asHex(), 30, 45);
ctx.fillStyle = b.asRGB()
ctx.fillRect(50, 50, 100, 100);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(a.asHex(), 55, 145);
var bl = a.blendWith(b, 0.3);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(50, 50, 75, 75);
ctx.fillStyle = '#FFFFFF';
ctx.fillText(bl.asHex(), 55, 70);
// lighten 1
ctx.fillStyle = '#000000';
ctx.fillText('Neutral Light', 200, 20);
var c = new Color(100, 100, 100);
var purelight= new Color(255, 255, 255);
ctx.fillStyle = c.asRGB();
ctx.fillRect(200, 25, 100, 100);
var bl = c.Mul(purelight,1.2);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(225, 50, 100, 100);
var bl = c.Mul(purelight, 0.8);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(250, 75, 100, 100);
// lighten 2
ctx.fillStyle = '#000000';
ctx.fillText('Yellowish Light', 400, 20);
var c = new Color(100, 100, 100);
var yellowlight= new Color(255, 255, 220);
var bl = c.Mul(yellowlight,1.0);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(400, 25, 100, 100);
var bl = c.Mul(yellowlight,1.2);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(425, 50, 100, 100);
var bl = c.Mul(yellowlight, 0.8);
ctx.fillStyle = bl.asRGB();
ctx.fillRect(450, 75, 100, 100);
}
}
추신 : 실제로 대부분이 stackoverfow에서 발견 될 수 있기 때문에 stackoverflow에 대해 문의해야합니다.
