تخفیف ویژه

شروع کار مقدماتی با HTML5 Canvas (جلسه 10) : شفافیت و گرادیان خطی و شعاعی

‏  5 دقیقه
۲۶ اسفند ۱۳۹۵
شروع کار مقدماتی با HTML5 Canvas (جلسه 10) : شفافیت و گرادیان خطی و شعاعی

html-canvas

همونطور که دیدید در جلسه گذشته در مورد رنگها صحبت کردیم. در این جلسه میخوایم در مورد شفافیت یا Transparency و گرادیان خطی و شعاعی صحبت کنیم.

شفافیت یا Transparency

همونطور که تا اینجای کار دیدیم هر شکل و مسیری که بر روی Canvas رسم میکنیم بصورت غیرشفاف و کاملا مات رسم میشه. شما میتونین درون Canvas اشکال مختلف رو بصورت شفاف هم قرار بدین و کاری کنید که پشت اونا هم معلوم باشه. برای اینکار به دو صورت میتونین این کار رو انجام بدین.

  • روش اول : با استفاده از rgba و hsla میتونین شفافیت رنگ رو برای ویژگی fillStyle و strokeStyle اشکال مختلف تغییر بدین
  • روش دوم : با استفاده از ویژگی globalAlpha میتونین شفافیت عمومی هم برای اشکال توپر و هم برای اشکال توخالی رو تعریف کنید

روش اول:

در این روش درون ویژگی fillStyle و strokeStyle میتونیم به ترتیب شفافیت اشکال توپر و توخالی رو مشخص کنیم. همونطور که میدونین حرف a در آخر rgba مخفف کلمه alpha یا شفافیت هست و میتونین عددی بین 0 تا 1 رو برای اون قرار بدین تا شکل مورد نظر کاملا شفاف یا کاملا مات رسم بشه. برای مثال کد زیر رو در نظر بگیرید:

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

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(50, 50, 100, 100);

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

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

روش دوم:

در این روش با استفاده از ویژگی globalAlpha، شفافیت تمامی اشکال از جمله توپر و توخالی رو مشخص میکنیم. این ویژگی هم مقداری بین 0 تا 1 رو میگیره و توضیحات اون شبیه به مورد بالا هست. اگر بخوایم کاری شبیه به بالا رو انجام بدیم، بصورت زیر خواهد شد:

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

ctx.globalAlpha = 1;
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

همونطور که دیدید در ابتدا این ویژگی رو برابر با 1 قرار دادیم و مربع آبی رنگ رو رسم کردیم و بعد از اون مقدار ویژگی globalAlpha رو برابر با 0.5 قرار دادیم و مربع قرمز رنگ رو رسم کردیم. با اینکار هم خروجی بالا رو خواهیم داشت:html5 canvas 31

نکته ای که باید بدونید اینه که شفافیت رو باید قبل از رسم شکل مورد نظر مشخص کنیم. مقدار پیش فرض شفافیت 1 هست و به معنای اینه که بصورت کاملا غیر شفاف رسم خواهد شد.

گرادیان خطی و شعاعی

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

  • گرادیان خطی یا Linear gradient
  • گرادیان شعاعی یا Radial gradient

گرادیان خطی:

دستور کلی این گرادیان بصورت زیر هست:html5 canvas 32

ctx.createLinearGradient(x0, y0, x1, y1);

همونطور که میدونین گرادیان خطی یک نقطه شروع و یک نقطه پایان داره. با استفاده از x0 و y0 مختصات نقطه شروع و با استفاده از x1 و y1 مختصات نقطه پایان رو مشخص میکنیم. شما باید گرادیان رو بسازید و درون یک متغیر ذخیره کنید. بصورت زیر:

var linearGradient = ctx.createLinearGradient(0,0,200,0);

بعد از اون باید با استفاده از متد addColorStop میتونیم رنگ نقاط مختلف اون گرادیان رو مشخص بکنیم. مثلا ما میخوایم کاری کنیم که در ابتدا گرادیان از رنگ سبز شروع بشه و در وسط به قرمز برسه و در انتها سفید بشه. برای اینکار بصورت زیر عمل میکنیم:

var linearGradient = ctx.createLinearGradient(0,0,150,0);
linearGradient.addColorStop(0,"green");
linearGradient.addColorStop(0.5,"rgb(255, 0, 0)");
linearGradient.addColorStop(1,"rgba(255, 255, 255, 1)");

همونطور که میبینید 3 رنگ رو با استفاده از addColorStop مشخص کردیم. محدودیتی برای تعداد رنگ نداریم و میتونیم هر چندتا که بخوایم اضافه کنیم. همونطور که میبینید هر متد addColorStop دو ورودی میگیره که ورودی اول عددی بین 0 تا 1 هست که موقعیت رنگ مورد نظر رو مشخص میکنه و ورودی دوم هم رنگ مورد نظر هست که میتونه هر فرمتی از رنگ استاندارد باشه. بعد از اینکار باید گرادیان تولید شده رو به ویژگی fillStyle یا strokeStyle بدیم. بعد از اون هر شکلی رو که رسم کنیم اگر در محدوده مختصات گرادیان باشه، تغییر رنگ بر روی اون نمایش داده خواهد شد. مثلا کد زیر رو در نظر بگیرید:

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

var linearGradient = ctx.createLinearGradient(0,0,150,0);
linearGradient.addColorStop(0,"green");
linearGradient.addColorStop(0.5,"rgb(255, 0, 0)");
linearGradient.addColorStop(1,"rgba(255, 255, 255, 1)");
ctx.fillStyle = linearGradient;
ctx.fillRect(10,10,150,100);

خروجی در مرورگر بصورت زیر خواهد شد:html5 canvas 33

گرادیان شعاعی:

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

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

همونطور که میدونید درون گرادیان شعاعی، گرادیان بین دایره ابتدا و دایره انتها رسم خواهد شد. x0 و y0 مختصات مرکز و r0 شعاع دایره ابتدایی هستن. x1 و y1 مختصات مرکز و r1 شعاع دایره انتهایی هست. بیشتر نکات شبیه به گرادیان خطی هست. مثلا کد زیر رو در نظر بگیرید:

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

var radialGradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 80);
radialGradient.addColorStop(0,"green");
radialGradient.addColorStop(0.5,"rgb(255, 0, 0)");
radialGradient.addColorStop(1,"rgba(255, 255, 255, 1)");
ctx.fillStyle = radialGradient;
ctx.fillRect(10,10,180,180);

در اینجا دو دایره هم مرکز هستند و شعاع اونا با هم فرق میکنه. خروجی در مرورگر بصورت زیر خواهد شد:html5 canvas 34

اگر دو دایره هم مرکز نباشن چنین چیزی خواهیم داشت:

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

var radialGradient = ctx.createRadialGradient(100, 100, 20, 100, 180, 80);
radialGradient.addColorStop(0,"green");
radialGradient.addColorStop(0.5,"rgb(255, 0, 0)");
radialGradient.addColorStop(1,"rgba(255, 255, 255, 1)");
ctx.fillStyle = radialGradient;
ctx.fillRect(10,10,180,180);

خروجی در مرورگر بصورت زیر خواهد شد:html5 canvas 35

میبینید که در این حالت گرادیان بصورت نامتقارن رسم میشه. بهمین راحتی.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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

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