 التعامل مع الالوان طرق برمجتها وكيفية نقل الشيفرة الى بي اتش بي انشاء...
بسم الله الرحمن الرحيم
في هذه المقالة سنتطرق الى طرق انشاء الالوان بلغة الجافا سكربت مع
كيفية نقل الشيفرة الى لغة البرمحة بي اتش بي سال الله عز وجل ان يعنينا على ذلك
ماهي الالوان وكيفية تميزها
الالوان هيا نظام رقمي يخبر الكمبيوتر على تعيين منطقة من البكسلات على الشاشة
بأظاتتها بحسب الرقم المحدد
وهو يقوم بالتعامل مع الالوان الرئيسية للبكسل
وهيا الالوان التالية
الاحمر
الاخضر
الازرق
وقد تم اعتماد هذه الالوان لقدرتها على انشاء الوان بعدد
يكون
255*255*255
اي ان كل لون ياخذ اقصى قيمة رقمية وهيا من الصفر الى الرقم 255
وتبدا من اللون الاسود الى اللون الابيض
الابيض يتكون من اعلى القيم السابقة
اي 255
لكل لون بينما الاسود ياخذ القيمة صفر
من كل لون
ويمكن اتكاز االوان وتمييزها بشكليها
الاول المختصر لالوان الخالصة
وتبدا بارقام عدد ها ثلاثة من كل صنف
ولتمييز ارقام الالوان عن باقي الارقام الاخرى تم اعتماد علامة
الباوند
وتاخذ طريقيتن للاعلان عنها اما بالنظام الست عشري
0-9 a-f
اي من
الصفر الى التسعة ومن الحرف a الى f
وجموعها 16 رقم مع حرف
وكما نعلم ان النظام الست عشري يبدا ب
0x
الى ان الالوان لاتحتاج الى ذلك فقط نظيف القيمة مباشرة
الاعلان المختصر عن الالوان الثابتة كما اشرنا سابقا
مثال
#000
او
#fff
يقوم المتعرض بهذه الحالة الى
اخذ كل رقم واضافة مثيله مرة اخرى اي
#000
يتم تحويله الى
#000000
الهدف من ذلك تقليل الكود
اما الاعلان عن اللون بكامله
#000000
#ffffff
وهيا الطريقة الاكثر شيعوعا
وتوجد طريقة اخرى
rgb(00,ff,00);
الكلمة التالية هيا اختصار الى الالوان الثلاثة الاساسية التي ذكرنها
red==احمر
green==اخضر
blue==ازرق
ومهمةاللون هو اشعال الاظاءة للون من الالوان الثلاثة الاساسية بدرجة قوى معينة حتى
يتيح انتاج اللون المطلوب وهو اسلوب عمل الشاشة
كيفية برمحة مجموعة الوان
var $red; //اللون الاحمر
var $green; //اللون الاخضر
var $blue; //اللون الازرق
var $color; //اللون النهائي
for (var r = 0; r <= 255; r += 51) {//بدا تكرار اللون الاحمر
$red = (r == 0) ? '00' : r;//فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$red = $red.toString(16).toUpperCase();//toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
for (var g = 0; g <= 255; g += 51) {// بدا تكرار اللون الاخضر
$green = (g == 0) ? '00' : g;// فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$green = $green.toString(16).toUpperCase();//toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
for (var b = 0; b <= 255; b += 51) {//بدا تكرار اللون الازرق
$blue = (b == 0) ? '00' : b;//فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$blue = $blue.toString(16).toUpperCase(); //toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
$color = '#' + $red + $green + $blue;//جمع الالوان مع بعضها
document.writeln($color);//طباعة الالوان
}
}
}
قد يتبادر سؤال لما استخدمنا الرقم 51
لانتج الوان بدرجة محددة من الالوان ويمكن استبدالها الى قيمة صفر ولكن سيكون ثقيل ولا حاجة له
الطريقة الاخرى
ساقوم بوضع مثا
var rgb = new Array('#00', '#33', '#66', '#99', '#CC', '#FF');//مصفوفة الالوان الاساسية
for (var r = 0; r < rgb.length; r++) {// تكرار درجة اللون الاحمر
var red = rgb[r];// اللون الاحمر من المصفوفة
for (var g = 0; g < rgb.length; g++) {// تكرار درجة اللون الاخضر
var green = rgb[g];// درجة اللون الاخضر من المصفوفة
for (var b = 0; b < rgb.length; b++) {// تكرار درجة اللون الازرق
var blue = rgb<b>;// درجة اللون الازرق من المصفوفة
document.writeln('#' + red + green + blue);
}
}
}
سيدور سؤال من اين اتيت بالالون التابعة للمصفوفة
rgb
ساضع الكود
var $red; //اللون الاحمر
var $green; //اللون الاخضر
var $blue; //اللون الازرق
var $color; //اللون النهائي
for (var r = 0; r <= 255; r += 51) {//بدا تكرار اللون الاحمر
$red = (r == 0) ? '00' : r;//فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$red = $red.toString(16).toUpperCase();//toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
for (var g = 0; g <= 255; g += 51) {// بدا تكرار اللون الاخضر
$green = (g == 0) ? '00' : g;// فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$green = $green.toString(16).toUpperCase();//toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
for (var b = 0; b <= 255; b += 51) {//بدا تكرار اللون الازرق
$blue = (b == 0) ? '00' : b;//فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$blue = $blue.toString(16).toUpperCase(); //toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
$color = '#' + $red + $green + $blue;//جمع الالوان مع بعضها
}
}
document.writeln($color);//طباعة الالوان
}
الفرق بين الكود هذا والاول هو
document.writeln($color);//طباعة الالوان
ووضعها في التكرار الاول
حتى تطبع القيمة المتحركة للالون عند تحريك الكود التكراري
فينتج لدينا
#00FFFF #33FFFF #66FFFF #99FFFF #CCFFFF #FFFFFF
ثم قمنا باقتصاص
الجزء الاول من الرقم
#00 #33 #66 #99 #CC #FF
لو تلاحظ ازالة القيمة العليا من الالون حتى نصل الى النهاية لنصل للون الصافي
نقل الكود الى لغة البرمجة بي اتش بي
الدوال التي ستتغير
toString(16)==dechex()
toUpperCase()==strtoupper()
نستعرض الشيفرة بشكل اجمل
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>color dwal.biz</title>
</head>
<body style="background-color:">
<script type="text/javascript">
<!--
var $red; //اللون الاحمر
var $green; //اللون الاخضر
var $blue; //اللون الازرق
var $color; //اللون النهائي
var output='<table style="width: 180px" cellpadding="0" cellspacing="0">'+
'<tr>';//الحقول
var count=0;
for(var r=0;r<=255;r+=51){//بدا تكرار اللون الاحمر
$red=(r==0)?'00':r;//فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$red=$red.toString(16).toUpperCase();//toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
for(var g=0;g<=255;g+=51){// بدا تكرار اللون الاخضر
$green=(g==0)?'00':g;// فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$green=$green.toString(16).toUpperCase();//toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
for(var b=0;b<=255;b+=51){//بدا تكرار اللون الازرق
$blue=(b==0)?'00':b;//فحص القيمة اذا كانت صفر نقوم بادراج الرقم صفر من اجل القيمة الستة عشرية
$blue=$blue.toString(16).toUpperCase(); //toUpperCase() ثم تحويل القيمة الى احرف كبيرة عن طريقtoString(16) تحويل القيمة الى ستة عشرية عن طريق
$color ='#'+$red+$green+$blue;//جمع الالوان مع بعضها
if(count==18){
output+='</tr>\n<tr>';
count=0;
}
output+='<td style="width:10px;height:10px;background-color:'+$color+'" title="'+$color+'"></td>'
count++;
}
}
}
output+='</table>';
document.write(output);
//-->
</script>
</body>
</html>
وارجو من الله العلي القدير ان اكون قد وفقت في الشرح
والله خير حافظ وهو ارحم الراحمين وقل ربي زدني علما
|
