আপনি কিছুটা ভুল বুঝেছেন, জাভাস্ক্রিপ্ট হেক্সাডেসিমাল হিসাবে রঙকে মডেল করে না, সিস্টেমও দেয় না। হেক্সাডেসিমাল স্বরলিপিটি কেবল মানব পাঠযোগ্য দলিলের জন্য। অভ্যন্তরীণভাবে আপনার সিস্টেমটি তিনটি পূর্ণসংখ্যার মান সংরক্ষণ করে। আপনি সরাসরি জিজ্ঞাসা করতে পারেন এবং এগুলি পরিচালনা করতে পারেন।
তবে কেবল এটুকু বলতে দিন যে আপনি সিস্টেমের অভ্যন্তরগুলির পরিবর্তে প্রকৃত নথিটি পরিচালনা করতে চান ulate তারপরে এমন কিছু লাইব্রেরিতে আপনার গণনা স্থগিত করা সেরা যা আপনার জন্য এটি করে। আপনি দেখতে পাচ্ছেন যে ব্রাউজারটি বিভিন্ন উপায়ে রঙের প্রতিনিধিত্ব করতে পারে তাই আপনাকে বিজ্ঞাপনের সব ধরণের ক্ষেত্রে যেমন আরজিবি এবং এইচএসভি ইনপুটগুলি প্রোগ্রাম করতে হবে। সুতরাং আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি কালার.জেসের মতো কিছু ব্যবহার করুন এটি আপনাকে অনেক মাথা ব্যথা বাঁচায়, কারণ আপনার নিজেরাই মিশ্রণ, গাening় হওয়া, হালকা করা ইত্যাদি প্রয়োগ করার প্রয়োজন নেই।
Edity:
আপনি যদি এটি নিজে করতে চান তবে আমি যা প্রস্তাব দিই না। সংখ্যার ত্রিভুজের পূর্ণসংখ্যার সংখ্যা বা ভাসমান পয়েন্ট সংখ্যা 0-1-এর পরিসরে রূপান্তর করে শুরু করুন এটি গণনা আরও সহজ করে তোলে।
এখন আরজিবি মানগুলিকে এইচএসএল বা এইচএসবিতে রূপান্তর করতে রঙের সহজ ম্যানিপুলেশনের জন্য এটি উজ্জ্বলতার গণনাগুলিকে তুচ্ছ করে তোলে (উইকিপিডিয়ায় ফর্মুলেশন রয়েছে)। সুতরাং কেবল হালকা বা উজ্জ্বল যোগ করুন বা বিয়োগ করুন। আসল আলো সিমুলেশন জন্য গণনা যথেষ্ট সহজ শুধু হালকা রঙ বেস রঙ দ্বারা গুন। সুতরাং নিরপেক্ষ আলো জন্য এটি সহজ:
ফলাফল = তীব্রতা * রঙ
রাফায়েল যেমন ব্যাখ্যা করেছেন, রঙ চ্যানেল দ্বারা পুনরাবৃত্তি সূত্র। আপনি রঙিন আলো অনুকরণ করতে পারেন
ফলাফল = তীব্রতা * লিগল্ট কালার * রঙ
এটি সেরাকে প্রথমে ভাসতে রূপান্তর করতে, সম্ভবত লিনিয়ারও। এটি আপনার অঞ্চলে উষ্ণ বা শীতল আলো দেয় যা আরও প্রাকৃতিক অনুভূতি আনতে পারে।
আলফা মিশ্রণ (অন্যের উপরে রঙের স্তরমেগ) সহজেই
ফলাফল = রঙিন টপ * আলফা + রঙবটম * (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);
}
}
পিএস আপনার স্ট্যাকওভারফ্লো সম্পর্কে জিজ্ঞাসা করা উচিত কারণ এগুলির বেশিরভাগই স্ট্যাকওভারফোতে পাওয়া যেতে পারে ready
