آموزش HTML5 Canvas
228 روز پیش
پويا صادقى , HTML
Canvas یکی از عناصر HTML5 هست که با استفاده از جاوا اسکریپت کار میکنه.
درمورد کانواس ، قبلا در پاسارگاد گرافیک، گفته بودم:
Canvas ؛ یکی از امکانات فوق العاده HTML5 ـه که میتونه به طورمستقیم گرافیک رو درصفحه ایجاد کنه
نمونه های استفاده از Canvas رو میتونید در این سایت ببینید
تگ Canvas وضعیت نسبتا مناسبی در بین مرورگرها داره و در همه مرورگرهای مدرن و IE9+ ساپورت میشه.
این تگ یه محیط مستطیل شکل ، مثل یک بوم نقاشی ایجاد میکنه و شما میتونید بر روی هر پیکسل از این بوم ، گرافیک ایجاد کنید.
برای ایجاد یک کانواس، از تگ canvas که یکی از تگ های HTML5 هست استفاده میکنیم:
<canvas id="canvas1" width="400" height="200"></canvas>
همونطور که گفتم ، برای ایجاد گرافیک از جاوا اسکریپت استفاده میکنیم.
کشیدن مستطیل با استفاده از Canvas
میخوایم یه مستطیل بنفش بکشیم؛ کدهای زیر رو در یک تگ Script (یا فایل js) قرار میدیم:
var c=document.getElementById("canvas1");
var mostatil=c.getContext("2d");
mostatil.fillStyle="#dd00ff";
mostatil.fillRect(0,0,200,100);
تو کد بالا، در خط دوم ، id المنت کانواس (که در کد قبل، canvas1 نامگذاری کرده بودیم) رو مشخص کردیم (و در متغییر c قراردادیم)
در خط سوم متغییر mostatil رو ایجاد کردیم و نوعش رو 2d یا دوبعدی مشخص کردیم (که برای قرار دادن اشکال هندسی ، متن ، عکس و… استفاده میشه.)
خط 4 رنگ مستطیل رو بنفش تنظیم میکنیم.
و در خط پنجم هم موقعیت طول و عرض مستطیل رو مشخص میکنیم؛ اعداد به پیکسل و به ترتیب زیر هستن:
1.فاصله نقطه شروع نسبت به سمت چپ کانواس
2.فاصله شروع نسبت به بالای کانواس
3.فاصله عمودی نقطه پایان نسبت به نقطه شروع
4.فاصله افقی نسبت به نقطه شروع
همونطور که متوجه شدید، اسکریپت برای کشیدن اشکال از یه مکان نما استفاده میکنه. برای کشیدن مستطیل بنفش، مکان نما از نقطه 0,0 شروع کرد به کشیدن مستطیل و در نقطه 200, 100 کار کشیدن رو تموم کرد.
کشیدن خط با استفاده از Canvas
برای کشیدن خط ، کافیه مثل همون مستطیل ، اول نوعش رومشخص کنیم و بعد مختصات رو تنظیم کنیم:
var khat=c.getContext("2d");
khat.lineTo(20,50);
khat.lineTo(230,120);
khat.stroke();
یعنی آبجکت khat از مختصات 20 و 50 شروع کنه به کشیدن و در مختصات 230 و 120 توقف کنه.
خط آخر هم مشخص میکنه که khat توپر باشه (قابل دیدن باشه!)
برای نمایش تصویر در Canvas ، از کد زیر استفاده میکنیم:
var ax=c.getContext("2d");
var img=new Image();
img.src="YourImageURL";
ax.drawImage(img,0,0);
خط اول که نوع آبجکت رو مشخص میکنه
خط دوم آبجکت رو با نام img ایجاد میکنه.
خط سوم آدرس عکس رو مشخص میکنه و خط آخر هم آبجکت ax در مختصات مشخص شده در کانواس نمایش میده
حتی میتونید با تغییر خط آخر کد، سایز عکس رو تغییر بدید:
ax.drawImage(img,0,0,400,300);
اینجوری طول عکس به 400 پیکسل و عرضش به 300 پیکسل تغییر میکنه
کشیدن دایره با استفاده از Canvas
var mycircle=c.getContext("2d");
mycircle.fillStyle="#FF0000";
mycircle.beginPath();
mycircle.arc(50,50,15,0,Math.PI*2,true);
mycircle.closePath();
mycircle.fill();
خط اول نوع آبجکت رو مشخص میکنه و خط دوم رنگ دایره رو
برای کشیدندایره به یه path احتیاج داریم.خط سوم path رو آغاز میکنه
در خط چهارم با استفاده از تابع arc دایره رو برای مختصات 50 , 50 د رکانواس تنظیم میکنه. قطرش رو 15 پیکسل در نظر میگیره.
تابع arc کارش ایجاد کمانه. برای اینکه کمان ما 360 درجه باشه و یه دایره کامل تشکیل بده، از دو عدد 0 و Math.PI*2 برای ایجاد کمان کامل استفاده میکنیم.
Math.PI*2 بر حسب رادیان، کمان رو یه دور کامل میچرخونه. پس اگه این دو مقدار رو تغییر بدیم میتونیم دایره های ناقص (کمان) ایجاد کنیم.
مقدار true کمان رو ساعتگرد ایجاد میکنه. اگه false بذاریم میشه غیر ساعتگرد. (البته برای دایره کامل تفاوتی نداره که کمان ساعتگرد کشیده شده باشه یا غیر ساعتگرد)
خط پنجم path که در خط سوم برای کشیدن دایره شروع کرده بودیم رو میبنده و خط آخر هم آبجکت Circle مون که این بلاها رو سرش آوردیم ، در کانواس نمایش میده 
نوشتن متن در Canvas
var mytxt = c.getContext('2d');
mytxt.font ="13px Courier";
mytxt.fillText("pasargad-graphic.com", 100, 100);
خط دوم فونت و سایز نوشته رو مشخص میکنه و خط سوم متن و مختصاتش رو مشخص میکنه و در کانواس قرار میده.
البته از زبان فارسی پشتیبانی نمیکنه…
