تخفیف ویژه

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

‏  4 دقیقه
۲۳ اسفند ۱۳۹۵
شروع کار مقدماتی با HTML5 Canvas (جلسه 9) : استایل دادن به اشکال

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 استفاده کنید.

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

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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

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

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

var canvas = document.getElementById('canvas');
var ctx = 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

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

var canvas = document.getElementById('canvas');
var ctx = 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

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

var canvas = document.getElementById('canvas');
var ctx = 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 رو قرار بدین تا این استایلها اعمال بشن. بعنوان مثال کد زیر رو ببینید:

var canvas = document.getElementById('canvas');
var ctx = 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

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ما در سون لرن با محدودسازی دسترسی آزاد به اینترنت مخالفیم     اطلاعات بیشتر