ایجاد پس زمینه ی Gradient به وسیله جاوااسکریپت

[eAmin]

سلام به همه دوستان، آشنایان و نزدیکان:10:

توجه: تمامی مشکلات این اسکریپت برطرف شد، حالا می تونید ازش با خیال راحت استفاده کنید.

بی مقدمه می ریم سر اصل مطلب:

من دیروز یه تابع نوشتم برای اینکه یه پس زمینه ی گرادینت درست کنه، البته با جاوااسکریپت، خوبیش هم اینه که دیگه نیاز به ساختن عکس توسط نرم افزارهای گرافیکی رو نداره.
این تابع cross browser هست و با تمامی مرورگرهای معروف فعلی همخوانی داره.

تابعی رو که نوشتم کدش زیر هست:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

یه توضیح هم در رابطه با طرز استفاده از این تابع:

آرگومان elm: این آرگومان وظیفه داره تا اون المنتی که شما قصد ایجاد پس زمینه ی گرادینت رو دارید، id المنت مربوطه رو بگیره.

آبجکتهای startPoint و endPoint:
startPoint: نقطه ی شروع.
endPoint: نقطه ی پایان.

اینم یه Sample:

[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

سوالی داشتید در خدمتم.

[Bill Gates]

یه عکس از نمونه اش هم بزار بیشتر پر نور بشیم:31::31:
تشکر//

[eAmin]

یه عکس از نمونه اش هم بزار بیشتر پر نور بشیم:31::31:
تشکر//

انجام شد:46:

[David.Jn]

كار ديگه از تشكر كردن گذشته بود
خيلي خوبه

ولي يه مشكل كوچولو داره اونم اينه كه وقتي اون div را بزگتر ميكني ecolor خيلي كمرنگ ميشه
و يا وقتي ميخواي تمام صفحه كني(768*1024) يه سايز كوچيكي حدود 400*200 را نشون ميده اونم با ecolor كمرنگ

[eAmin]

كار ديگه از تشكر كردن گذشته بود
خيلي خوبه

ولي يه مشكل كوچولو داره اونم اينه كه وقتي اون div را بزگتر ميكني ecolor خيلي كمرنگ ميشه
و يا وقتي ميخواي تمام صفحه كني(768*1024) يه سايز كوچيكي حدود 400*200 را نشون ميده اونم با ecolor كمرنگ
سلام.

ممنون زیباترین جان، تا حالا به اینش فکر نکرده بودم!
می رم روش کار می کنم شاید درست شد، یا شایدم نه، بستگی داره به مرورگرهایی که از تگ canvas استفاده می کنن، باید دید یه باگه یا مشکل از کدنویسیه من هست.

مرسی اگه اینو گوشزد نمی کردی هرگز دنبالش نمی رفتم.

[David.Jn]

يه چيز يادم رفت بگم !!!
دور div يه border بده ببين چه جوري ميشه.
يه فضاي خالي پايين گراديانت ايجاد ميشه .
البته فقط تو opera اينو ديدم

اگه بتوني درستش كني كه خيلي باحال ميشه

[eAmin]

سلام.

با تشکر فراوان از زیباترین جان عزیز...

خب مشکلش رو فهمیدم، اشکال از کدنویسی من بود:41:

بعضی از مشکلهایی که تا حالا برطرف شده:
وقتي ميخواي تمام صفحه كني(768*1024) يه سايز كوچيكي حدود 400*200 را نشون ميده اونم با ecolor كمرنگ
به خوبی و خوشی رفت توی خونشون!
----
وقتي اون div را بزگتر ميكني ecolor خيلي كمرنگ ميشه
این یکی هنوز مشکل داره ولی بعضی از سایزها رو درست کردم، البته روش جالبی رو به کار نبردم و ازش خوشم نیامد:13: ولی فعلا کار راه انداز هست.

مشکل border رو من بر خلاف تو توی اپرا ندارم و در فایرفاکس اینجوری هست، البته خیلی محسوس نیست.
فعلا این کد تا اینجای کار شده این هر وقت کامل شد توی پست اول می زارم.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[David.Jn]

مشکل border رو من بر خلاف تو توی اپرا ندارم و در فایرفاکس اینجوری هست، البته خیلی محسوس نیست.

نميخواستم بازم بيام مشكل تراشي كنم ولي چون ديدم ميخواي كد بهينه شدشو بزاري گفتم بگم بهت
شما سايز 100*100 تا 300*300 را امتحان كن اين فضاي خالي را مشاهده ميكني
به اين صورت كه پهناي گراديانت به اندازه هرdiv پر نميشه.
حدودآ يك سومش ازسمت راست فصاي خالي ميشه.(هم تو فاير فكس هم اپرا)

ولي كارت خيلي درسته.[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]

[eAmin]

نميخواستم بازم بيام مشكل تراشي كنم ولي چون ديدم ميخواي كد بهينه شدشو بزاري گفتم بگم بهت
شما سايز 100*100 تا 300*300 را امتحان كن اين فضاي خالي را مشاهده ميكني
به اين صورت كه پهناي گراديانت به اندازه هرdiv پر نميشه.
حدودآ يك سومش ازسمت راست فصاي خالي ميشه.(هم تو فاير فكس هم اپرا)

ولي كارت خيلي درسته.[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
سلام.

می گم تو در آینده دیباگر خوبی می شی! هر کی تو رو انتخاب کنه مطمئن باش پشیمون نمی شه.

آره حالا منظورت رو فهمیدم، مرسی.
من می تونم تمام این مشکلات رو برطرف کنم، ولی دارم دنبال یه راه بهتری می گردم. چون این راههایی که من پیدا کردم، همشون یه جور استاتیکن و به طور خودکار عمل درستی رو انجام نمی دن، این مشکل دقیقا توی کدی که نوشتم دیده می شه. می بینی اگر من بخوام با این روش پیش برم، حجم کد 2 برابر می شه و وقت گیر هم هست، ولی فعلا باید با همین روش پیش برم تا شاید راه بهتری پیدا کنم.
اینایی که گفتم در مورد border هم صدق می کنه.

[eAmin]

سلام.

فقط نیم ساعت کارداشت هاااا.

مشکل هم این بود که باید مقدار طول و عرض canvas رو می گرفتم و توی متد fillRect می ریختم، در صورتی که من قبلا مقداره elm رو می ریختم. ولی هر چی فکر می کنم باز هم با عقل جور در نمی یاد، اونم اینه که هر دو یک مقدار رو دارن پس چرا الکی گیر می داد؟؟!!؟!؟!:13:

خلاصه حالا دیگه تمامی مشکلات حل شد، و دیگه هیچ مشکلی وجود نداره، می تونید با خیال راحت ازش استفاده کنید:46:

اینم از کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

راستی آبجکتهای scolor و ecolor به startPoint و endPoint تغییر کردن.

ممنون از همتون، مخصوصا زیباترین جان ( اسمش رو هم هنوز نمی دونم ).:11:

[neopersia]

سلام امین جان
اسکرپت جالب بود ممنون که زحمت کشیدی :11:
انشالله بازم شاهد این قبیل فعالیتها در تالار باشیم تا همه یه چیزایی یاد بگیریم.

یه درخواست دارم که اگه بقیه دوستان هم موافق باشن موضوع تاپیک بعدی امین باشه (پررویی رو ببین تا چه حده موضوع تاپیک آینده رو هم مشخص کردم! :31:)
من یه در مورد شیء گرایی در جاوا اسکرپت یه مقدار ابهام دارم اگه میشه در مورد این قضیه توضیح بده

[eAmin]

سلام امین جان
اسکرپت جالب بود ممنون که زحمت کشیدی :11:
انشالله بازم شاهد این قبیل فعالیتها در تالار باشیم تا همه یه چیزایی یاد بگیریم.

یه درخواست دارم که اگه بقیه دوستان هم موافق باشن موضوع تاپیک بعدی امین باشه (پررویی رو ببین تا چه حده موضوع تاپیک آینده رو هم مشخص کردم! :31:)
من یه در مورد شیء گرایی در جاوا اسکرپت یه مقدار ابهام دارم اگه میشه در مورد این قضیه توضیح بده
سلام.

خواهش می کنم.
مرسی ( ولی من خیلی کوچیک تر از اونی هستم که بخوام مخصوصا به شما چیز یاد بدم شما که استاده مایی:10::27:)

نه بابا پررویی چیه... شما جون بخواه، تا جایی که دانش این حقیر اجازه بده در خدمتم.
اگه یادت باشه، توی اون تاپیکی که بهت گفتم ببرش ترش (!!! :19:)، :31: یه اشاره هایی کرده بودم، راستش از همون موقع شروع به نوشتن متنش کردم، البته بعد از 3 روز ولش کردم، و تا الانه که همون جوری داره خاک می خوره:13: ولی از امشب دوباره می رم سراغش، می دونی چرا اینقدر دیر می کنم؟ آخه می خوام یه آموزش واقعا جامع بزارم، خودت که می دونی مطالب فارسی در این زمینه خیلی کمه و همشون هم یا ناقصه یا کامل توضیح نداده...

انشالله هر وقت کامل شد، حتما قرارش می دم.:11::10:

[Ultimator]

مرسی امین کارت درسته ولی یک سوال ! 

میشود این را سه رنگ نیز نمود ؟ 

[David.Jn]

سلام
بابا اجازه بدبد ما هم سوال كنيم(^_^)
آقا امين چه جوري ميشه اين گراديانت رو اريب هم كرد؟؟!!

[eAmin]

مرسی امین کارت درسته ولی یک سوال ! 

میشود این را سه رنگ نیز نمود ؟ 

سلام.

ممنون:46::11:

توی این راهی که من رفتم نه، البته توی همه ی مرورگرها می شه راش انداخت ولی توی ie کار نمی کنه. ولی اگه حتما نیازش داری می تونی از اینجا کمک بگیری:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید


سلام
بابا اجازه بدبد ما هم سوال كنيم(^_^)
آقا امين چه جوري ميشه اين گراديانت رو اريب هم كرد؟؟!!
خب آقا داود!:31: و جواب شما.
برای اینکه بشه اینکار رو انجام داد باید، دوباره رووش کار کنم، البته 50،50 هست، توی مرورگرهای استاندارد که خیلی راحت می شه اینکار رو کرد، ولی توی ie گیر می ده چون باید از 2 تا فیــــلتر استفاده کرد که فکر نمی کنم با این روش بشه توی ie پیاده سازیش کنیم.
البته کار نشد نداره، خیلی گیر بده با یکم vml می شه این مشکل رو حل کرد:20::11: