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

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

html-canvas

همونطور که دیدید در جلسه گذشته در مورد رسم کمان و دایره با استفاده از متدهای arcTo و arc صحبت کردیم. درون Canvas رسم اشکال به خط و دایره و کمان محدود نمیشه و میتونین اشکال پیچیده‌تری رو نیز با استفاده از اون به وجود بیارید. با استفاده از متدهای bezierCurveTo و quadraticCurveTo میتونین منحنی‌های مورد نظر خودتون رو به وجود بیارید.

متد quadraticCurveTo:

با استفاده از این متد میتونین یک منحنی به وجود بیارید. این متد به مختصات دو نقطه علاوه بر نقطه آخر یا Last point نیازمند هست. اگر شما یک مسیر رو رسم کرده باشید، آخرین نقطه اون مسیر میشه اولین نقطه منحنی و همچنین با استفاده از متد moveTo میتونین مختصات آخرین نقطه رو تغییر بدین. Syntax استفاده از این متد بصورت زیر هست:

ctx.quadraticCurveTo(cpx, cpy, x, y);

توضیح موارد بالا:

  • cpx : مختصات افقی نقطه کنترل یا Control Point
  • cpy : مختصات عمودی نقطه کنترل
  • x : مختصات افقی نقطه نهایی منحنی
  • y : مختصات عمودی نقطه نهایی منحنی

نقطه کنترل، نقطه ای هست که منحنی به سمت اون کشیده میشه. این نقطه هر چه از نقاط اول و آخر منحنی دورتر باشه باعث میشه که منحنی بیشتر کشیده بشه. برای مثال کد زیر رو ببینید:

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

ctx.beginPath();
ctx.moveTo(50,20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

همونطور که دیدید مختصات نقطه اول 50 و 20 هست و مختصات نقطه آخر هم 50 و 100 هست و نقطه کنترل ما که منحنی به سمت اون کشیده میشه در 230 و 30 قرار داره. خروجی در مرورگر بصورت زیر میشه:html5 canvas 23

در تصویر بالا نقاط 1 و 3 به ترتیب نقاط ابتدا و انتهای منحنی هستن و نقطه 2 هم نقطه کنترل کننده هست که منحنی به سمت اون کشیده میشه.

متد bezierCurveTo:

با استفاده از این متد میتونین یک منحنی دارای انحنا به دو جهت مختلف رو وجود بیارید. این متد به مختصات 3 نقطه علاوه بر نقطه آخر یا Last point نیازمند هست. اگر شما یک مسیر رو رسم کرده باشید، آخرین نقطه اون مسیر میشه اولین نقطه منحنی و همچنین با استفاده از متد moveTo میتونین مختصات آخرین نقطه رو تغییر بدین. Syntax استفاده از این متد بصورت زیر هست:

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

توضیح موارد بالا:

  • cpx1 : مختصات افقی نقطه کنترل یا Control Point اول
  • cpy1 : مختصات عمودی نقطه کنترل اول
  • cpx2 : مختصات افقی نقطه کنترل یا Control Point دوم
  • cpy2 : مختصات عمودی نقطه کنترل دوم
  • x : مختصات افقی نقطه نهایی منحنی
  • y : مختصات عمودی نقطه نهایی منحنی

نقطه کنترل، نقطه ای هست که منحنی به سمت اون کشیده میشه. این نقطه هر چه از نقاط اول و آخر منحنی دورتر باشه باعث میشه که منحنی بیشتر کشیده بشه. برای مثال کد زیر رو ببینید:

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

ctx.beginPath();
ctx.moveTo(100,0);
ctx.bezierCurveTo(0, 50, 200, 150, 100, 200);
ctx.stroke();

همونطور که دیدید مختصات نقطه اول 100 و 0 هست و مختصات نقطه آخر هم 200 و 100 هست و نقطه کنترل اول 0 و 50 هست که باعث میشه منحنی در ابتدا به سمت چپ کشیده بشه و نقطه کنترل بعدی 200 و 150 هست که باعث میشه منحنی به سمت راست کشیده بشه. خروجی در مرورگر بصورت زیر میشه:html5 canvas 24

در تصویر بالا نقاط 1 و 4 به ترتیب نقاط ابتدا و انتهای منحنی هستن و نقاط 2 و 3 هم نقاط کنترل کننده هستند که منحنی به سمت اونا کشیده میشه. برای مشاهده بهتر این موارد میتونین این سایت رو ببینید و نقاط مختلف رو Drag کنید تا اونا رو در عمل ببینید.

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

متد rect:

همونطور که در جلسات قبل دیدید با استفاده از متد fillRect و strokeRect مستطیل توپر و توخالی رو به وجود آوردیم. با استفاده از متد rect هم میتونین یک مستطیل رو به وجود بیارید. کد زیر رو در نظر بگیرید:

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

ctx.rect(10, 10, 100, 100);
ctx.fill();

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

بهمین راحتی.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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

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