Bạn đã hiểu nhầm mọi thứ một chút, javaScript không mô hình hóa màu như hệ thập lục phân, hệ thống cũng không. Ký hiệu thập lục phân chỉ dành cho tài liệu có thể đọc được của con người. Bên trong hệ thống của bạn lưu trữ ba giá trị nguyên. Bạn có thể querry và thao tác trực tiếp.
Nhưng hãy nói rằng bạn muốn thao tác với tài liệu thực tế thay vì hệ thống bên trong. Sau đó, tốt nhất để trì hoãn tính toán của bạn đến một số thư viện làm điều này cho bạn. Bạn thấy trình duyệt có thể thể hiện màu sắc theo nhiều cách, do đó bạn sẽ cần lập trình tất cả các loại trường hợp như đầu vào quảng cáo rgb và hsv. Vì vậy, tôi khuyên bạn nên sử dụng một cái gì đó như Color.js, nó giúp bạn đỡ đau đầu hơn, vì bạn không cần phải tự thực hiện pha trộn, làm tối, làm sáng, v.v.
Chỉnh sửa:
Trong trường hợp bạn muốn tự làm điều này, điều mà tôi không khuyên bạn. Bắt đầu bằng cách biến sự hiện diện hexar thành bộ ba số nguyên hoặc số dấu phẩy động trong phạm vi 0-1, điều này làm cho việc tính toán dễ dàng hơn.
Bây giờ để dễ dàng thao tác chuyển đổi màu giá trị RGB thành HSL hoặc HSB, điều này làm cho việc tính toán độ sáng trở nên tầm thường (Wikipedia có công thức). Vì vậy, sau đó chỉ cần thêm hoặc trừ độ sáng hoặc độ sáng. Đối với mô phỏng ánh sáng thực, việc tính toán đủ dễ dàng chỉ cần nhân màu sáng với màu cơ bản. Do đó, đối với ánh sáng trung tính, nó chỉ đơn giản là:
Kết quả = Cường độ * Màu sắc
Như Rafael giải thích, công thức lặp lại bởi kênh màu. Bạn có thể mô phỏng ánh sáng màu bằng cách làm
Kết quả = Cường độ * LigtColor * Màu
Đối với điều này tốt nhất để chuyển đổi để nổi đầu tiên, có thể tuyến tính cũng. Điều này cho phép ánh sáng ấm áp hoặc mát mẻ trên khu vực của bạn có thể mang lại cảm giác tự nhiên hơn.
Pha trộn alpha (lớp màu trên đầu khác) chỉ đơn giản là
Kết quả = ColorTop * alpha + ColorBottom * (1-alpha)
Chỉnh sửa cuối cùng
Cuối cùng, đây là một số mã làm điều gì đó đối với những gì bạn yêu cầu. Lý do điều này rất khó thấy là loại hình trừu tượng của nó ngay bây giờ. Mã sống có sẵn ở đây
Hình 1 : Kết quả mã bên dưới xem thêm phiên bản trực tiếp .
{
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 bạn nên hỏi về stackoverflow vì trên thực tế hầu hết điều này có thể được tìm thấy trên stackoverfow.
