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

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

html-canvas

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

قرار دادن الگو یا Pattern

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

ctx.createPattern(image, repetition);

توضیحات کد بالا:

  • image : با استفاده از این ویژگی میتونیم یک الگو رو مشخص کنیم و اون رو بعنوان الگوی خودمون معرفی کنیم
  • repetition : با استفاده از این ویژگی میتونین نحوه تکرار شدن الگوها رو مشخص کنید. برای این مورد میتونین 4 تا مقدار repeat و repeat-x و repeat-y و no-repeat رو استفاده کنید. با استفاده از این مقادیر به ترتیب تکرار در دو جهت، تکرار در جهت افقی، تکرار در جهت عمودی و تکرار نشدن الگو، اعمال خواهد شد.

برای image مورد نظر میتونین به روشهای مختلفی اون رو مشخص کنید. مثلا میتونیم یک شئ جدید از Image رو بسازیم و ویژگی src اون رو برابر با تصویر مورد نظر قرار بدیم. بصورت زیر:

var img = new Image();
img.src = 'pattern.png';

همونطور که دیدید تصویر مورد نظر رو قرار دادیم. حالا برای اینکه مطمئن بشیم که تصویر مورد نظر اول لود میشه و بعد مورد استفاده قرار میگیره، از رویداد onload استفاده میکنیم و الگوی خودمون رو درون اون میسازیم:

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

var img = new Image();
img.src = 'pattern.png';
img.onload = function() {
	var pattern = ctx.createPattern(img, 'repeat');
}

همونطور که دیدید الگوی مورد نظرمون رو با استفاده از متد createPattern ساختیم و اون رو در دو جهت افقی و عمودی تکرار کردیم. الگوی مورد نظر رو درون متغیر pattern ذخیره کردیم و حالا میتونیم از این الگو برای ویژگی‌های strokeStyle و fillStyle استفاده کنیم. بصورت زیر:

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

var img = new Image();
img.src = 'pattern.png';
img.onload = function() {
	var pattern = ctx.createPattern(img, 'repeat');
	ctx.fillStyle = pattern;
	ctx.fillRect(10, 10, 150, 150);
}

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

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

<img id="imgPattern" src="pattern.png" style="display: none;">

همونطور که دیدید تصویر مورد نظر رو قرار دادیم و برای اون id مشخص کردیم تا در Javascript بتونیم به راحتی به اون دسترسی داشته باشیم و در نهایت هم diplay اون رو برابر با none قرار دادیم تا بصورت جداگانه در صفحه نمایش داده نشه. کدهای Javascript بصورت زیر خواهند بود:

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

var img = document.getElementById('imgPattern');
img.onload = function() {
	var pattern = ctx.createPattern(img, 'repeat');
	ctx.fillStyle = pattern;
	ctx.fillRect(10, 10, 150, 150);
}

در این حالت هم خروجی شبیه به قبل خواهد بود:html5 canvas 36

شما میتونین الگوی مورد نظرتون رو با استفاده از یک canvas دیگه بسازید و بعد از اون بعنوان الگو برای canvas‌های دیگه استفاده کنید. ساختن canvas میتونه on the fly باشه. یعنی درون Javascript و در حین اجرای برنامه canvas رو میسازید و از اون استفاده میکنید. برای اینکار در Javascript بصورت زیر عمل میکنیم:

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

// create the off-screen canvas
var canvasPattern = document.createElement("canvas");
canvasPattern.width = 10;
canvasPattern.height = 10;
var contextPattern = canvasPattern.getContext("2d");

// draw pattern to off-screen context
contextPattern.beginPath();
contextPattern.strokeRect(0.5, 0.5, 10, 10);
contextPattern.arc(5.5, 5.5, 3, 0, Math.PI);
contextPattern.rect(3, 3, 1, 1);
contextPattern.rect(7, 3, 1, 1);
contextPattern.stroke();

// now pattern will work with canvas element    
var pattern = ctx.createPattern(canvasPattern,"repeat");
ctx.fillStyle = pattern;
ctx.fillRect(20, 20, 100, 100);
ctx.fill();

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

بهمین راحتی. روشهای دیگه هم وجود داره که این موارد معروفترین اونا هستن.

سایه یا Shadow

شما در Canvas به راحتی میتونین برای المنتهای مورد نظرتون سایه قرار بدین. برای اینکار 4 ویژگی زیر وجود داره:

  • shadowOffsetX : با استفاده از این ویژگی میتونین فاصله افقی سایه نسبت به المنت مورد نظر رو مشخص کنید. مقدار پیش فرض 0 هست و هر چه اون رو بیشتر کنیم به سمت راست و اگر مقدار منفی قرار بدیم، به سمت چپ خواهد رفت.
  • shadowOffsetY : با استفاده از این ویژگی میتونین فاصله عمودی سایه نسبت به المنت مورد نظر رو مشخص کنید. مقدار پیش فرض 0 هست و هر چه اون رو بیشتر کنیم به سمت پایین و اگر مقدار منفی قرار بدیم، به سمت بالا خواهد رفت.
  • shadowBlur : با استفاده از این ویژگی میتونین میزان محوشدگی سایه رو مشخص کنید. مقدار پیش فرض 0 هست و هر چه اون رو بیشتر کنیم، مقدار محوشدگی بیشتر خواهد شد.
  • shadowColor : با استفاده از این ویژگی هم میتونیم رنگ سایه مورد نظرمون رو مشخص کنیم. از هر فرمت رنگی استانداردی میتونین برای این مورد استفاده کنید.

مثلا کد زیر رو در نظر بگیرید:

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

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.shadowColor = 'rgb(0, 0, 0)';

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);
ctx.fillRect(100, 100, 50, 50);

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

بهمین راحتی میتونیم از سایه‌ها استفاده کنیم.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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