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

[eAmin]

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

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

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

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

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

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

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

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

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

اینم یه Sample:

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

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

[Bill Gates]

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

[eAmin]

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

انجام شد

[David.Jn]

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

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

[eAmin]

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

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

سلام.

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

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

[David.Jn]

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

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

[eAmin]

سلام.

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

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

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

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

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

[David.Jn]

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

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

ولي كارت خيلي درسته.

[eAmin]

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

ولي كارت خيلي درسته.

سلام.

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

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

[eAmin]

سلام.

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

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

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

اینم از کد:

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

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

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