canvas html5

گرافیک در HTML5-آموزش کامل تگ canvas-بخش دوم

 متدهای  مربوط به کار با چهارضلعی ها در ترسیم اشکال بر روی بوم :

متد rect() :

از این متد برای ایجاد چهار ضلعی استفاده می شود.

الگوی این متد به شکل context.rect(x,y,width,height) میباشد که در این الگو بجای x باید مختصات محور ایکس از گوشه ی بالای سمت چپ را وارد کنیم. بجای y باید مختصات محور yاز گوشه ی بالای سمت چپ را وارد کنیم.بجای width پهنای چهارضلعی را برحسب واحد پیکسل وارد می کنیم و بجای height ارتفاع چهارضلعی را بر اساس واحد پیکسل وارد می کنیم.

البته نکته ی بسیار مهم در زمان کار با این متد این است  که برای مشاهده واقعی چهارضلعی ای  که توسط این متد ایجاد کردید ، باید حتما از متد stroke()بهره ببرید و اگر تمایل داشتید که درون چهارضلعی رنگ شود هم باید از متد fill() بهره ببرید.

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

مثال :

خروجی :

rect methide canvas sampleمتد fillRect() :

از این متد برای ایجاد یک چهار ضلعی توپر استفاده می شود.

الگوی این متد به شکل context.fillRect(x,y,width,height) میباشد که در این الگو بجای x باید مختصات محور ایکس از گوشه ی بالای سمت چپ را وارد کنیم. بجای y باید مختصات محور yاز گوشه ی بالای سمت چپ را وارد کنیم.بجای width پهنای چهارضلعی را برحسب واحد پیکسل وارد می کنیم و بجای height ارتفاع چهارضلعی را بر اساس واحد پیکسل وارد می کنیم.

البته نکته ی بسیار مهم در زمان کار با این متد این است  که در حالت پیش فرض رنگ درون چهارضلعی ای که توسط این متد ایجاد شده مشکی است و در صورتی که شما تمایل دارید رنگ ، شیب رنگ یا الگوی زمینه ی دلخواهی را درون چهار ضلعی قرار دهید ، میتوانید از مشخصه ی fillStyle بهره ببرید.

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

مثال :

خروجی :

fillrect methide canvas sample

متد strokeRect() :

از این متد برای ایجاد یک چهارضلعی با خط دور دور و توخالی استفاده می شود.

الگوی این متد به شکل context.strokeRect(x,y,width,height) میباشد که در این الگو بجای x باید مختصات محور ایکس از گوشه ی بالای سمت چپ را وارد کنیم. بجای y باید مختصات محور yاز گوشه ی بالای سمت چپ را وارد کنیم.بجای width پهنای چهارضلعی را برحسب واحد پیکسل وارد می کنیم و بجای height ارتفاع چهارضلعی را بر اساس واحد پیکسل وارد می کنیم.

البته نکته ی بسیار مهم در زمان کار با این متد این است  که در حالت پیش فرض رنگ دور چهارضلعی ای که توسط این متد ایجاد شده مشکی است و در صورتی که شما تمایل دارید رنگ ، شیب رنگ یا الگویی دلخواه را برای دور چهار ضلعی قرار دهید ، میتوانید از مشخصه ی  strokeStyle بهره ببرید.

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

مثال :

خروجی :

strokerect methode canvas sample

متد clearRect() :

این متد یک چهار ضلعی با اندازه ی دلخواه شما را از درون یک شکل دیگر پاک میکند.

الگوی این متد به شکل context.fillrect(x,y,width,height) میباشد که در این الگو بجای x باید مختصات محور ایکس از گوشه ی بالای سمت چپ را وارد کنیم. بجای y باید مختصات محور yاز گوشه ی بالای سمت چپ را وارد کنیم.بجای width پهنای چهارضلعی را برحسب واحد پیکسل وارد می کنیم و بجای height ارتفاع چهارضلعی را بر اساس واحد پیکسل وارد می کنیم.

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

مثال :

خروجی :

clearerct canvas sample

متدهای مربوط به مسیر ترسیمات بر روی بوم :

متد fill() :

از این متد برای پرکردن محدوده ی دلخواهی از ترسیمات استفاده می شود.رنگ پیش فرض درون ترسیمات مشکی است.

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

در صورتیکه ترسیمی بسته نشده باشد ، این متد نقطه ابتدایی را به نقطه انتهایی وصل کرده (مانند متد closePath()) و سپس درون آن را رنگ می کند.

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

مثال :

خروجی :

fill methode canvas

متد stroke() :

این متد خط دور ترسینات را ترسیم میکند.

این متد در اصل عملیات ترسیم اشکالی که با متدهایی مانند lineTo() و moveTo() انجام شده را قطعی و نهایی میکند.

رنگ پیش فرض خط دور ترسیم شده با این متد مشکی است و برای ایجاد خط دورهای رنگی و یا دارای الگوی رنگی ، باید از مشخصه ی strokeStyle بهره ببرید.

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

مثال :

خروجی :

stroke methode canvas

متد beginPath() :

از این متد برای آغاز یک مسیر و یا بازنشانی مسیر فعلی استفاده میشود.

برای ایجاد یک مسیر ترسیمی میتوانید از متدهای  moveTo()، lineTo()،quadricCurveTo()، bezierCurveTo()، arcTo()، و arc() استفاده کنید.

همچنین برای نمایش واقعی مسیر ترسیمی باید از متد stroke()  بهره ببرید.

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

مثال :

خروجی :

begin path canvas

متد moveTo() :

کار ابن متد این است که بدون اینکه خطی ایجاد کند ، یک مسیر ترسیمی را بهنقطه ی دلخواه شما در بوم نقاشی منتقل کند.

همچنین برای نمایش واقعی مسیر ترسیمی باید از متد stroke()  بهره ببرید.

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

مثال : 

خروجی :

moveto methode canvas

متد closePath() :

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

همچنین برای نمایش واقعی مسیر ترسیمی باید از متد stroke()  بهره ببرید.

برای پرکردن مسیر ترسیمی و یا حتی رنگ بندی دلخواه رنگ درون مسیر ترسیمی نیز می توانید از متد fill() و مشخصه ی fillStyle بهره ببرید.

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

مثال :

خروجی :

closepath methode canvas

متد lineTo() :

این متد یک نقطه ی جدید در بوم اضافه کرده و  از این نقطه و آخرین نقطه ی مشخص شده در بوم یک خط جدید ایجاد می کند. این متد در عمل یک خط ایجاد نمیکند و برای اینکه یک خط بصورت واقعی ایجاد شود باید بعد از این متد از متد stroke() بهره ببرید.

الگوی این متد به شکلcontext.lineTo(x,y) میباشد که در این الگو بجای x باید مختصات محور x و بجای y باید مختصات محور y را وارد کنیم.

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

مثال :

خروجی : 

lineto methode canvas

متد clip() :

این متد بخشی از یک شکل در بوم را جدا کرده و کاری میکند تا بتوانیم بر روی این ناحیه ی جدا شده عملیات هایی مثل رنگ بندی را انجام دهیم.

نکته ی مهم این است که زمانیکه ما از این متد برای برش و جدا کردن ناحیه ای از یک شکل استفاده می کنیم ، کلیه عملیات های مربوط به اشکال بر روی بوم ، فقط بر روی ناحیه ی جدا شده کار خواهند کرد.

ما میتوانیم قبل از اینکه از این متد بهره ببریم، شکلی که هنوز بخشی از آن جدا نشده را با متد save() ذخیره نماییم تا در آینده بتوانیم با متد reset() قید ناحیه ی جدا شده را زده و به شکل اصلی برگردیم.

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

مثال :

خروجی : 

clip methode canvas sample

متد quadraticCurveTo() :

این متد یک نقطه به مسیر فعلی اضافه می کند تا جهت ایجاد یک منحنی درجه دوم استفاده شود.

یک منحنی درجه دوم دو نقطه دارد که نقطه ی اول نقطه ی کنترل منحنی است و نقطه ی دوم نقطه ی انتهایی منحنی .

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

اگر مسیری برای ایجاد منحنی وجود نداشت ، میتوانید از متدهای beginPath() و moveTo() برای ایجاد نقطه ی شروع بهره ببرید.

در مثال ذیل با چگونگی ترسیم یک منحنی درجه دوم بهتر آشنا می شوید. 

quadraticcurveto sample canvas

الگوی این متد به شکلcontext.quadraticCurveTo(cpx,cpy,x,y) میباشد که در این الگو بجای cpx باید نقطه ی کنترل منحنی را در محور x ها وارد نماییم و بجای cpy باید نقطه ی کنترل منحنی را در محور y ها وارد نماییم. بجای x باید مختصات نقطه ی پایانی منحنی در محور x ها را وارد کنیم و بجای y باید مختصات نقطه ی پایانی منحنی در محور y را وارد نماییم.

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

مثال : 

خروجی : 

quadraticcurveto canvas

متد bezierCurveTo() :

از این متد برای ایجاد یک نقطه به مسیر فعلی برای ایجاد کنترل منحنی بزیر (Bezier)  مکعبی استفاده می شود .

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

نقطه ی شروع منحنی در اصل نقطه ی انتهخایی مسیر فعلی است.

اگر مسیری برای ایجاد منحنی وجود نداشت ، میتوانید از متدهای beginPath() و moveTo() برای ایجاد نقطه ی شروع بهره ببرید.

در مثال ذیل با چگونگی ترسیم یک منحنی بزیر مکعبی بهتر آشنا می شوید. 

beziercurveto canvas sample

الگوی این متد به شکلcontext.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) میباشد که در این الگو بجای cp1x باید نقطه ی اول کنترل منحنی را در محور x ها وارد نماییم و بجای cp1y باید نقطه ی اول کنترل منحنی را در محور y ها وارد نماییم. بجای cp2x باید نقطه ی دوم کنترل منحنی را در محور x ها وارد نماییم و بجای cp2y باید نقطه ی دوم کنترل منحنی را در محور y ها وارد نماییم. بجای x باید مختصات نقطه ی پایانی منحنی در محور x ها را وارد کنیم و بجای y باید مختصات نقطه ی پایانی منحنی در محور y را وارد نماییم.

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

مثال : 

خروجی :

beziercurveto canvas

متد arc()  :

از این متد برای ایجاد یک قوس یا منحنی برای ایجاد دایره یا بخشی از یک دایره استفاده می شود.

برای ایجاد دایره با این متد ، نقطه شروع را صفر قرار داده و نقطه پایانی را ۲*Math.PI قرار دهید. 

برای اینکه این متد بصورت واقعی یک قوس یا دایره را ایجاد کند حتما باید از متدهای stroke() و fill() بهره ببرید . 

در مثال ذیل با نحوه ی کارکرد این متد بهتر آشنا می شوید. 

arc methode canvas sample

الگوی این متد به شکلcontext.arc(x,y,r,sAngle,eAngle,counterclockwise) میباشد که بجای x باید مختصات محور x  مرکز دایره را وارد کنیم و بجای y باید مختصات محور y مرکز دایره وارد شود . همچنین بجای r باید شعاع دایره را وارد کنیم. بجای sAngle باید زاویه ی شروع منحنی بر اساس رادیانس را وارد نماییم و بجای eAngle باید زاویه ی پایانی را براساس رادیانس وارد کنیم.بجای counterclockwise نیز باید با وارد کردن مقدار true یا false تعیین کنیم که قوس یا دایره در جهت عقربه های ساعت باشد یا برعکس جهت عقربه های ساعت . مقدار false که مقدار پیش فرض نیز هست به معنی جهت قوس در جهت عقربه های ساعت است و مقدار true به معنی این است که جهت قوس در جهت برعکس عقربه های ساعت است.

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

مثال :

خروجی :

arc canvas sample

متد arcTo() :

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

برای اینکه این متد بصورت واقعی یک قوس یا دایره را ایجاد کند حتما باید از متد stroke() بهره ببرید . 

الگوی این متد به شکلcontext.arcTo(x1,y1,x2,y2,r) میباشد که بجای x1 باید مختصات محور x برای مماس اول را تعیین نماییم و بجای y1 نیز مختصات محور y را برای مماس اول تعیین کنیم. همچنین بجای x2 باید مختصات محور x برای مماس دوم را تعیین نماییم و بجای y2 نیز مختصات محور y را برای مماس دوم تعیین کنیم. بجای r نیز باید شعاع قوس را وارد نماییم.

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

مثال :

خروجی :

arcto canvas methode

متد isPointInPath() :

این متد در صورتیکه نقطه ی مورد نظر در مسیر ترسیمی وجود داشته باشد مقدار true را بر میگرداند و در غیر اینصورت مقدار false را برمیگرداند.

الگوی این متد بشکل context.isPointInPath(x,y) میباشد که بجای x باید مختصات نقطه در محور x و بجای y هم مختصات نقطه در محور y وارد شود.

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

مثال : 

خروجی :

ispointinpath methode canvas sample

برای جلوگیری از طولانی شدن مبحث شما را دعوت میکنم به بخش سوم مبحث مربوط به گرافیک در HTML بر اساس بوم یا Canvas .

علی امیدوار

مهندس کامپیوتر هستم و عاشق یادگیری و آموزش. مدیر سایت 20آموز .

نوشته های دیگر نویسنده

0 پاسخ

دیدگاه خود را ثبت کنید

Want to join the discussion?
Feel free to contribute!

پاسخ دهید