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

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

html-canvas

در جلسه قبل نکاتی رو در مورد Canvas در اختیارتون قرار دادیم و در آخر هم بیان کردیم که در Canvas میشه دو شکل کلی رو پیاده سازی کرد. یک شکل که خیلی ساده هست همون مستطیل هست و روش دیگه استفاده از Path یا مسیر هست که خیلی از Rectangle پیچیده تره و تقریبا هر شکلی رو میتونیم باهاش رسم کنیم و امکانات خیلی زیادی رو در اختیارمون میزاره.

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

  • fill : در این حالت شکل یا متن یا .... بصورت توپر رسم میشن
  • stroke : در این حالت شکل یا متن یا ... بصورت توخالی رسم میشن

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

  • fillStyle : این ویژگی، استایل شکل توپر رو مشخص میکنه
  • strokeStyle : این ویژگی، استایل شکل توخالی رو مشخص میکنه

برای هر کدام از موارد بالا میتونین رنگ، الگو یا pattern، گرادیان یا Gradient قرار بدین و استایل شکل مورد نظر رو مشخص کنید. مقدار پیش فرض هر دو ویژگی بالا، رنگ مشکی یا #000 هست. خب حالا فرض کنید بخوایم یک مستطیل توپر رو رسم کنیم. برای اینکار از متد fillRect استفاده میکنیم. بصورت زیر:

ctx.fillRect(x, y, width, height);

همونطور که دیدید با استفاده از متد fillRect از شئ ctx یا همون CanvasRenderingContext2D میتونیم یک مستطیل توپر رو رسم کنیم. همونطور که در بالا میبینید این متد 4 تا ورودی داره که به ترتیب بصورت زیر تعریف میشن:html5 canvas 13

  • x : مختصات افقی نقطه شروع مستطیل رو مشخص میکنه (نقطه شروع مستطیل، بالا و سمت چپ اون قرار داره)
  • y : مشخصات عمودی نقطه شروع مستطیل رو مشخص میکنه
  • width : عرض مستطیل رو مشخص میکنه
  • height : ارتفاع مستطیل رو مشخص میکنه

اگه کدی بصورت زیر داشته باشیم:

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

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

با اینکار یک مستطیل با عرض و ارتفاع 100 از نقطه 10 و 10 بر روی Canvas رسم میشه. خروجی بصورت زیر خواهد بود:html5 canvas 8

همونطور که گفتیم رنگ پیش فرض مشکی هست و به همین دلیل به رنگ مشکی در اومده. حالا مثلا اگه بخوایم کاری کنیم که متسطیل مورد نظر کل canvas رو اشغال کنه، بصورت زیر میشه:

ctx.fillRect(0, 0, canvas.width, canvas.height);

خروجی بصورت زیر میشه:html5 canvas 9

اگه همه چیز رو نگه داریم و فقط بجای fillRect از strokeRect استفاده کنیم، کدهای بصورت زیر خواهند شد:

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

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

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

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

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

ctx.lineWidth = 5;
ctx.strokeRect(10, 10, 100, 100);

خروجی:html5 canvas 11

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

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

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

حالا میتونیم یک ناحیه از اون رو با استفاده از متد clearRect پاک کنیم. بصورت زیر:

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

ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(30, 30, 60, 60);

خروجی بصورت زیر میشه:html5 canvas 12

همونطور که دیدید یک فضای مربعی شکل به طول و ارتفاع 60 پیکسل از درون مربع توپر پاک کردیم. کار دیگه ای هم که میشه انجام اینه که کل canvas رو با استفاده از clearRect پاک کنیم و برای اینکار بصورت زیر عمل میکنیم:

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

ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(0, 0, canvas.width, canvas.height);

یا اینکار هر چیزی که بر روی Canvas رسم کرده باشیم پاک میشه و Reset خواهد شد.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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

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