شروع کار مقدماتی با HTML5 Canvas (جلسه 9) : استایل دادن به اشکال

آخرین مطالب

امکانات وب

شروع کار مقدماتی با HTML5 Canvas (جلسه 9) : استایل دادن به اشکال

0 44 ۲۳ اسفند ۹۵

html-canvas

همونطور که میدونید در جلسات قبل در مورد متدهایی که میتونیم با استفاده از اونا مسیرها و اشکال رو تعریف کرده و بر روی Canvas رسم کنیم رو بهتون توضیح دادیم. در این جلسه و جلسات بعد انواع روشهای استایل دهی به اشکال رو بهتون آموزش میدیم. استایلهایی که میتونین از اونا استفاده کنید رو در زیر قرار میدیم:

colors : با استفاده از این مورد میتونین رنگهای مختلفی رو به اشکال مورد نظرتون اعمال کنید
Transparency : میتونین شکل مورد نظر رو شفاف کنید
Pattern : میتونین الگوی مورد نظرتون رو به شکل مورد نظر اعمال کنید
Fill Rule : با استفاده از این مورد میتونین مشخص کنید زمانی که مسیرها همدیگه رو قطع میکنن، Fill کجا و چطوری تعریف بشه
Line Style : با استفاده از این مورد میتونین استایل خطوط رو تغییر بدین
Shadows : میتونین سایه قرار بدین
Gradients : میتونین گرادیانهای مورد نظر رو بصورت خطی و شعاعی قرار بدین

رنگها یا Colors

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

fillStyle : با استفاده از این ویژگی میتونین رنگ اشکال توپر رو مشخص کنید
strokeStyle : با استفاده از این ویژگی میتونین رنگ اشکال توخالی رو مشخص کنید

برای این ویژگی ها میتونین چند مقدار رو قرار بدین. میتونین مقادیر از نوع رنگ و گرادیان و الگو یا Pattern رو قرار بدین. در مورد گرادیان و الگوها در جلسات بعد بصورت کامل توضیح میدیم و فعلا به اعمال رنگ به اشکال میپردازیم. همونطور که در بالا هم اشاره کردیم، مقدار پیش فرض این ویژگی ها #000 یا رنگ سیاه هست. این نکته رو در نظر داشته باشید که از اون خطی که مقادیر fillStyle و strokeStyle رو تغییر میدین به بعد همه اشکال به همون رنگ در میان و اگر نیاز داشتید که شکل بعدی رنگ دیگه ای داشته باشه، باید دوباره این ویژگی رو تغییر بدین. مثلا اگر بخواید رنگ اشکال توپر رو نارنجی قرار بدین، به روشهای زیر میتونین این کارو انجام بدین:

ctx.fillStyle='orange';

ctx.fillStyle='#FFA500';

ctx.fillStyle='rgb(255, 165, 0)';

ctx.fillStyle='rgba(255, 165, 0, 1)';

ctx.fillStyle='hsl(39, 100%, 50%)';

ctx.fillStyle='hsla(39, 100%, 50%, 1)';

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

مثلا برای رسم یک مستطیل توپر نارنجی رنگ بصورت زیر عمل میکنیم:

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle='hsla(39, 100%, 50%, 1)';

ctx.fillRect(10,10,150,100);

خروجی بصورت زیر خواهد بود: html5 canvas 26

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

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle='hsla(39, 100%, 50%, 1)';

ctx.fillRect(10,10,150,100);

ctx.fillRect(10,120,50,50);

خروجی: html5 canvas 27

اگه بخوایم شکل دوم رنگ متفاوتی داشته باشه باید بصورت زیر عمل کنیم:

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle='hsla(39, 100%, 50%, 1)';

ctx.fillRect(10,10,150,100);

ctx.fillStyle='#ddd';

ctx.fillRect(10,120,50,50);

میبینید که fillStyle رو مجددا تغییر دادیم. خروجی بصورت زیر خواهد شد: html5 canvas 28

دیدید که شکل دوم رنگ متفاوتی رو داره. برای اشکال توخالی هم به همین صورت عمل میکنیم:

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.strokeStyle='hsla(39, 100%, 50%, 1)';

ctx.strokeRect(10,10,150,100);

ctx.strokeStyle='#f00';

ctx.strokeRect(10,120,50,50);

دیدید که رنگ نارنجی و قرمز رو برای مستطیلهای توخالی اعمال کردیم. خروجی بصورت زیر هست: html5 canvas 29

بهمین راحتی. برای مسیرهایی هم که با استفاده از متدهای stroke() و fill() رسم میشن، شما میتونین برای هر مسیر یک استایل توپر و یک استایل توخالی مشخص کنید. برای هر مسیر باید beginPath و closePath رو قرار بدین تا این استایلها اعمال بشن. بعنوان مثال کد زیر رو ببینید:

varcanvas=document.getElementById('canvas');

varctx=canvas.getContext('2d');

ctx.fillStyle="#c82124";

ctx.beginPath();

ctx.arc(20,20,15,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

ctx.fillStyle="#3370d4";

ctx.beginPath();

ctx.arc(100,20,15,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

همونطور که دیدید دو دایره با رنگهای مختلف رو رسم کردیم. خروجی بصورت زیر هست: html5 canvas 30

بهمین راحتی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 333 تاريخ : چهارشنبه 25 اسفند 1395 ساعت: 23:06

شروع کار مقدماتی با HTML5 Canvas (جلسه 9) : استایل دادن به اشکال

آخرین مطالب

امکانات وب

شروع کار مقدماتی با HTML5 Canvas (جلسه 9) : استایل دادن به اشکال

رنگها یا Colors

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه