คุณมีความเข้าใจผิดในเรื่องเล็กน้อยจาวาสคริปต์จะไม่สร้างสีเป็นเลขฐานสิบหกและไม่มีทั้งระบบ สัญกรณ์เลขฐานสิบหกเป็นเพียงสำหรับเอกสารที่มนุษย์อ่านได้ ภายในระบบของคุณจะเก็บค่าจำนวนเต็มสามค่า คุณสามารถ querry และจัดการเหล่านั้นโดยตรง
แต่ขอเพียงบอกว่าคุณต้องการจัดการเอกสารจริงแทนที่จะเป็นระบบภายใน ดังนั้นจึงเป็นการดีที่สุดที่จะเลื่อนการคำนวณของคุณไปยังห้องสมุดบางแห่งที่ทำสิ่งนี้เพื่อคุณ คุณเห็นว่าเบราว์เซอร์สามารถแสดงสีได้หลายวิธีดังนั้นคุณจะต้องตั้งโปรแกรมทุกกรณีเช่น ad rgb และ hsv input ดังนั้นฉันขอแนะนำให้คุณใช้สิ่งที่คล้ายกับColor.js ซึ่งจะช่วยลดอาการปวดหัวของคุณได้มากเนื่องจากคุณไม่จำเป็นต้องใช้การผสมการทำให้สีเข้มขึ้นการลดน้ำหนัก ฯลฯ ... ด้วยตัวคุณเอง
Edity:
ในกรณีที่คุณต้องการทำด้วยตัวเองซึ่งฉันไม่แนะนำ เริ่มต้นด้วยการเปลี่ยนการนำเสนอเลขฐานสิบหกให้เป็นจำนวนสามเท่าของจำนวนเต็มหรือตัวเลขทศนิยมในช่วง 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);
}
}
PS คุณควรถามใน stackoverflow เนื่องจากความจริงทั้งหมดนี้สามารถพบได้ใน stackoverfow
