canvas html5

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

در HTML5 ویژه برای طراحی و ترسیم اشکال مختلف بجود آمده است گه با کشیدن اشکال بوسیله ی این دو تگ می توانیم تا حد زیادی سرعت بارگذاری صفحات خود را بالا ببریم. این دو تگ عبارتند از تگ <canvas> و تگ <svg> . 

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

 

تگ <canvas></canvas> :

  • Canvas به معنی بوم نقاشی است.
  • به وسیله این تگ و کدهای برنامه‌نویسی (که معمولا جاوااسکریپت است ) می توانیم تصاویر گرافیکی زیبا و جالبی ایجاد کنیم. 
  • این تگ به تنهایی نمیتواند ترسیمی انجام دهد و در اصل مانند ظرفی است که جهت ترسیم اشکال هندسی مختلفی مانند خط ، دایره ، مربع ، کمان ، الگو یا Pattern ، جعبه ،  متن ، نمودارها و حتی اضافه کردن تصاویر با استفاده از دستورات جاوااسکریپت از آن استفاده می شود.
  • یادتان باشد که برای کار با این تگ حتما باید به زبان جاوااسکریپت آشنا باشید ، والا از پس ترسیم اشکال با این تگ بر نخواهید آمد.
  • شکل کلی استفاده از این تگ بشکل ذیل است.

  • همانطور که در قطعه کد فوق مشاهده کردید، تگ <canvas> ویژگی مهمی بنام id دارد که برای تعریف مشخصه ی خاص به این تگ است ، تا بر اساس آن بتوانیم در جاوااسکریپت بر روی این تگ کنترل و مدیریت نماییم.
  • همچنین ویژگی های دیگری به نام های width و height در این تگ وجود دارد که به ترتیب برای تعیین پهنا و ارتفاع بوم استفاده می شوند.
  • در ضمن بین دو تگ باز و بسته ی <canvas></canvas> میتوانیم عبارتی را بنویسیم تا در صورتی که مرورگری از این تگ پشتیبانی نکرد، این عبارت نمایش داده شود.

جدول پشتیبانی مرورگرهای تحت کامپیوتر از این تگ :

نام مرورگرGoogle ChromeInternet ExplorerMozilla FirefoxSafariOpera
وضعیت پشتیبانی۴٫۰۹٫۰۲٫۰۳٫۱۹٫۰

  معرفی سایتیهایی پر از مثال های Canvas :

قبل از هرگونه مثالی شما را دعوت می کنم تا با کلیک بر روی لینک های ذیل، چند سایت که پر از مثالهای جالب از کاربرد تگ <canvas> است را مشاهده نمایید.

http://corehtml5canvas.com/code-live/

https://code.tutsplus.com/articles/21-ridiculously-impressive-html5-canvas-experiments–net-14210

http://curran.github.io/HTML5Examples/

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

 مثال :

در مثال زیر یک تگ canvas با یک id تعریف شده  و برای آن عرض و طول و حاشیه و رنگ تعریف شده است.  این شکل طراحی شده به عنوان یک تصویر کامل ایجاد می‌شود و به عنوان یک تصویر می‌توانیم  روی آن کلیک راست کرده و آن را ذخیره کنیم.

مثال :

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

باز هم ذکر میکنم که شاید برای شمایی که به زبان جاوااسکریپت آشنایی ندارید ، کار با canvas سخت و یا حتی غیرممکن باشد.

با ذکر این توضیح به تشریح کد فوق میپردازم.

ابتدا در داخل تگ <canvas> به بوم خودمان یک id به نام mycanvas دادیم تا در آینده بتوانیم با این id در جاوااسکریپت ، روی بوممان مدیریت کنیم.

حالا برویم سراغ کدهای جاوااسکریپت .

در خط اول ما با استفاده از دستور document.getElementById گفتیم که محتوای عنصری که id اش mycanvas است را درون متغیری به نام c بریز.

در خط دوم با استفاده از دستور c.getcontetx(“2d”) گفتیم که بیا و کلیه متدها و مشخصه های مربوط به ترسیم اشکال دوبعدی را برای متغیر c فراخوانی کرده و همه این متدها و مشخصه ها را در متغیر ctx قرار بده.

متد getcontetxt() کلیه متدها و مشخصه های مربوط به یک شی را باز میگرداند. در این متد عبارت ۲d برای فراخوانی دستورات و متدهای مربوط به ترسیم اشکال دوبعدی است.

در خط سوم با استفاده از دستور ctx.fillstyel رنگ درون بوممان را تعیین کردیم. کلا یادتان باشد که متد fillstyle() برای دریافت و یا تعیین رنگ ، شیب رنگ و یا الگوی رنگی درون یک شی بکار میرود.در ضمن مقدار پیش فرض این متد ۰۰۰۰۰۰# است که به معنای رنگ مشکی است.

در خط چهارم با استفاده از دستور ctx.fillrect() یک شکل مربع توپر ساختیم. متد fillrect() برای تعریف یک مربع توپر بکار میرود.در این متد مختصات چهار ضلع مربع را باید وارد نماییم.

مهمترین متدها و مشخصه های موجود در تگ <canvas> :

قبل از ادامه مبحث در مورد تگ <canvas> بیایید تا با هم متدها و مشخصه های مهم موجود در این تگ را مرور کنیم. البته باید عرض کنم که این مطالب باعث طولانی شدن مقاله می شود و شما میتوانید از این مطلب بگذرید و آن را مطالعه نکنید.ولی درکل اگر میخواهید اشراف کاملی به canvas داشته باشید این مطلب خیلی بدردتان خواهد خورد.

مشخصه های مربوط به رنگ ، استایل و سایه در تگ <canvas> :

مشخصه ی fillStyle : 

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

مقدار پیش فرض این مشخصه مشکی با کد ۰۰۰۰۰۰# است.

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

مثالی از تعیین شیب رنگ خطی با این ویژگی :

خروجی قطعه کد فوق بشکل ذیل خواهد بود.

canvas linear gradient sample

مثالی از تعیین شیب رنگ دایره ای با این ویژگی :

خروجی قطعه کد فوق بشکل ذیل خواهد بود.

redial color canvas sample

مثالی از تعیین الگوی زمینه با این ویژگی :

خروجی قطعه کد فوق بشکل ذیل خواهد بود.

pattern canvas sample

مشخصه ی strokeStyle  :

از این مشخصه برای تعیین یا دریافت یک رنگ (Color) ، شیب رنگ (Gradient) و یا الگوی رنگی (Pattern) برای خط دور اشکال ترسیمی استفاده می شود.

مقدار پیش فرض این مشخصه مشکی با کد ۰۰۰۰۰۰# است.

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

مثال :

خروجی مثال فوق بشکل ذیل خواهد بود.

stroke canvas

البته باید ذکر کنم که برای خط دور ما میتوانیم از شیب رنگ و همینطور الگو نیز مانند مثال های مربوط به ویژگی fillstyle بهره ببریم.

ویژگی های shadowColor ، shadowblur ، shadowOffsetX و shadowOffsetY :

از ویژگی shadowcolor برای تعیین یا دریافت یک رنگ (Color) برای سایه دور اشکال ترسیمی استفاده می شود.مقدار پیش فرض این مشخصه مشکی با کد ۰۰۰۰۰۰# است.

از ویژگی shadowblur برای ایجاد سطح سایه دور اشکال استفاده می شود.

همچنین برای تعیین اندازه سایه در محورهای افقی و عمودی میتوانید به ترتیب از ویژگی های shadowOffsetX و shadowOffsetY استفاده کنید. در این دو ویژگی میتوانید از اعداد مثبت و منفی استفاده نمایید. مثلا استفاده از عدد صفر در مقابل ویژگی shadowOffsetX یعنی سایه به سمت راست باشد و استفاده از عدد ۲۰ در مقابل این ویژگی یعنی اینکه سایه ۲۰ واحد به راست است و برعکس ،  استفاده از عدد -۲۰ در مقابل این ویژگی یعنی سایه ۲۰ واحد به چپ باشد.

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

مثال : 

خروجی مثال فوق بشکل ذیل خواهد بود.

shadow canvas sample

متدهای  createLinearGradient() و  addcolorStop() :

از متد createLinearGradient() برای ایجاد یک شیب رنگی خطی  استفاده می شود.

شما میتوانید مقدار خروجی این متد را در مشخصه های fillstyle و strokestyle استفاده نمایید.

همچنین باید بگویم که در زمان استفاده از این متد ، میتوانیم جهت تعیین رتگ بندی برای شیب رنگمان از متد دیگری به نام addColorStop()  بهره ببریم. 

 یادتان باشد که context.createLinearGradient(x0,y0,x1,y1) است.در این الگو x0 یعنی نقطه شروع شیب رنگ در محور xها و y0 یعنی نقطه شروع شیب رنگ در محور y و x1 یعنی نقطه پایان شیب رنگ در محور x و y1 یعنی نقطه پایان شیب رنگ در محور yها .

تا یادم نرفته الگوی متد  addcolorStop() را هم بگویم که بشکل gradient.addColorStop(stop,color) است.

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

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

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

مثال : 

خروجی کد فوق بشکل ذیل خواهد بود.

linear gradient cancas sample

متد createLinearGradient() :

این متد برای ایجاد یک الگو ی تصویری جهت استفاده در ترسیمات بکار میرود.

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

الگوی استفاده از این متد بشکل context.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”); می باشد .

در این الگو در قسمت image میتوانیم مسیر تصویر ، بوم و یا عنصر ویدئویی که میخواهیم درون الگو از آن استفاده کنیم را وارد میکنیم.

همچنین در بخش دوم این متد اگر از مقدار repeat استفاده کنیم،تصویر در محور افقی و عمودی تکرار می شود.وارد کردن مقدار repeat-x هم باعث تکرار تصویر در محور افقی میشود و  وارد کردن مقدار repeat-y باعث تکرار تصویر در محور عمودی میشود.وارد کردن مقدار no-repeat به معنی عدم تکرار تصویر است.

مثال : 

خروجی مثال فوق بشکل ذیل خواهد بود.

pattern canvas sample

متد createRadialGradient() :

از متد createRadialGradient() برای ایجاد یک شیب رنگی دایره ای استفاده می شود.

شما میتوانید مقدار خروجی این متد را در مشخصه های fillstyle و strokestyle استفاده نمایید.

همچنین باید بگویم که در زمان استفاده از این متد ، میتوانیم جهت تعیین رتگ بندی برای شیب رنگمان از متد دیگری به نام addColorStop()  بهره ببریم. 

 یادتان باشد که context.createRadialGradient(x0,y0,r0,x1,y1,r1) است.در این الگو x0 یعنی نقطه شروع شیب رنگ در محور xها و y0 یعنی نقطه شروع شیب رنگ در محور y و r0 یعنی نقطه شروع شیب رنگ در شعاع دایره و  x1 یعنی نقطه پایان شیب رنگ در محور x و y1  یعنی نقطه پایان شیب رنگ در محور yها و r1 هم نقطه پایان شیب رنگ شعاع دایره.

 

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

مثال : 

خروجی کد فوق بشکل ذیل خواهد بود.

redial color canvas sample

مشخصه های  مربوط به کار با خطوط در ترسیم اشکال بر روی بوم :

مشخصه های lineCap و lineWidth :

از مشخصه lineCap برای دریافت و یا تعیین صافی یا گردی ابتداو انتهای خطوط استفاده می شود.

در مقابل این مشخصه ما میتوانیم از یکی از سه مقدار square ، butt و یا round استفاده نماییم.مقدار butt مقدار پیش فرض بوده و ابتدا و انتهای خط را به صورت صاف نشان میدهد. مقدار square از نظر ظاهری شبیه مقدار butt است اما خط را کمی بلندتر نشان می دهد. مقدار round نیز ابتدا و انتهای خط را گرد نشان می دهد اما خط را کمی بلندتر می کند.

از مشخصه ی lineWidth نیز برای تعیین کردن و یا دریافت پهنای خط دلخواه استفاده می شود.

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

مثال :

خروجی :

line cap canvas

مشخصه ی lineJoin :

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

الگوی استفاده از این مشخصه بشکل context.lineJoin=”bevel|round|miter” است که نشان میدهد که در مقابل این ویژگی ما باید یکی از سه مقدار bevel برای اریب دار کردن گوشه ، round برای گرد کردن گوشه و miter برای تیز کردن گوشه استفاده نماییم. البته باید بگویم که مقدار پیش فرض برای این مشخصه miter است.

در ضمن مقدار miter متاثر از مشخصه ای بنام  miterLimit است که در ادامه به آن خواهیم پرداخت.

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

مثال : 

خروجی مثال فوق بشکل ذیل خواهد بود.

linejoin canvas

مشخصه ی miterLimit :

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

ضمنا باید بگویم که مقدار پیش فرض این مشخصه عدد ۱۰ میباشد.

miterlimit canvas sample 1

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

مثال :

خروجی : 

miterlimit canvas

به دلیل طولانی شدن مطلب ، خواهشمندم که ادامه مبحث مربوط به تگ <canvas> را در بحث بعدی مطالعه بفرمایید.

علی امیدوار

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

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

0 پاسخ

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

Want to join the discussion?
Feel free to contribute!

پاسخ دهید