Ви трохи зрозуміли речі, javaScript не моделює колір як шістнадцятковий, як і система. Шістнадцяткова позначення - лише для людського читаного документа. Внутрішня система зберігає три цілих значення. Ви можете шукати та керувати ними безпосередньо.
Але давайте просто скажемо, що ви хочете маніпулювати фактичним документом замість внутрішніх систем. Тоді найкраще відкласти свої обчислення на деяку бібліотеку, яка робить це за вас. Ви бачите, що браузер може представляти кольори різними способами, тому вам потрібно буде запрограмувати всілякі випадки, такі як введення rgb та hsv. Тому я пропоную вам скористатися чимось на зразок Color.js, це позбавить вас від головного болю, оскільки вам не потрібно самостійно здійснювати змішування, затемнення, освітлення тощо.
Edity:
Якщо ви хочете зробити це самостійно, що я не рекомендую. Почніть з перетворення шістнадцяткової подання в числові трійки цілих чисел чи числа з плаваючою комою в діапазоні 0-1, це полегшує обчислення.
Тепер для легкої маніпуляції з перетворенням кольорів значень RGB в HSL або HSB це робить обчислення яскравості дрібницею (у Вікіпедії є формулювання). Тож тоді просто додайте або відніміть легкість або яскравість. Для моделювання реального світла обчислення досить просто, просто помножте світлий колір на базовий колір. При цьому для нейтрального світла його просто:
Результат = Інтенсивність * Колір
Як пояснив Рафаель, формула повторюється кольоровим каналом. Ви можете імітувати кольорове світло, роблячи це
Результат = Інтенсивність * LigtColor * Колір
Для цього найкраще перетворити в плаваючий перший, можливо, і лінійний. Це дозволяє отримати тепло або прохолодне світло у вашій місцевості, що може принести більше природного відчуття.
Альфа-змішування (шаровий колір кольору поверх інших) просто
Результат = ColorTop * альфа + ColorBottom * (1-альфа)
Остаточна редакція
Нарешті, ось якийсь код, який щось робить у напрямку того, що ви запитуєте. Причину, яку важко помітити, є те, що зараз це своєрідне абстрактне. Тут доступний живий код
Зображення 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.
