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

‏ 4 دقیقه

۰۸ اسفند ۱۳۹۵

خب در جلسه گذشته دیدید که در مورد تگ canvas و نحوه استفاده از اون و ویژگی هایی که داره صحبت کردیم و اون رو بصورت کامل براتون شفاف سازی کردیم. در این جلسه میخوایم کار با Javascript رو شروع کنیم. همونطور که دیدید در جلسه گذشته گفتیم که حتما id رو برای canvas مورد نظر قرار بدین تا بتونیم به راحتی در Javascript به اون دسترسی داشته باشیم. پس اولین کاری که باید بکنیم اینه که در تگ script که در آخر فایل index.html هست، کد زیر رو اضافه کنید:

<!DOCTYPE html>
<html>
	<head>
	    <title>HTML5 Canvas Learning</title>
	</head>

	<body>
	    <canvas id="canvas" width="200" height="200" style="border: 1px solid #000;">
	    	Your browser does not support html canvas. Please update your browser and try again.
	    </canvas>

	    <script>
	    	var canvas = document.getElementById('canvas');
	    </script>
	</body>
</html>

میبینید که یک متغیر به نام canvas تعریف کردیم و اون رو برابر با المنت با id = canvas قرار دادیم. همونطور که میدونید المنتی که id = canvas داره، همون canvas خودمون هست و با اینکار به راحتی به canvas در Javascript دسترسی پیدا کردیم. خب مرحله بعد اینه که زمینه یا context رو محیا کنیم تا بتونیم درون اون نقاشی کنیم و شکل‌های مورد نظر خودمون رو بکشیم و قرار بدیم. شما میتونین دو نوع زمینه یا context رو برای canvas تعریف و استفاده کنید.

2d : با دریافت این زمینه، شما میتونین طراحی و اشکال خودتون رو در محیط 2 بعدی به وجود بیارید و در نتیجه یک محور افقی و یک محور عمودی خواهید داشت و میتونین کارهای مورد نظر خودتون رو در اون انجام بدین.
webgl : با دریافت این زمینه، شما میتونین طراحی و اشکال خودتون رو در محیط 3 بعدی به وجود بیارید و در نتیجه یک محور افقی و یک محور عمودی و یک محور عمود بر صفحه خواهید داشت و میتونین کارهای مورد نظر خودتون رو در اون انجام بدین و به کار خودتون عمق بدین و اون رو بیشتر به دنیای طبیعی نزدیک کنید.

خب برای دریافت زمینه باید از متد getContext استفاده کنید. پس اگر بخوایم به زمینه 2 بعدی دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

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

خط اول رو که قبلا توضیح دادیم. میبینید که در خط دوم، با استفاده از متد getContext، زمینه 2d رو از canvas مورد نظر دریافت کردیم و نتیجه رو درون متغیر ctx ریختیم. حالا ctx زمینه دو بعدی ما هست و میتونیم هر چیزی که بخوایم رو درون اون قرار بدیم.

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

console.log(ctx);

اگر با استفاده از console.log، از متغیر ctx خروجی بگیریم، خروجی بصورت زیر خواهد بود:

میبینید که درون console مربوط به inspector مرورگر Chrome، خروجی مورد نظر اومده. همونطور که میبینید یک شئ بنام CanvasRenderingContext2D اومده و ویژگی‌ها و متدهای مربوط به خودش رو داره و میتونین همه اونا رو ببینید.

برای دریافت زمینه 3 بعدی هم بصورت زیر عمل میکنیم:

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

میبینید که در خط دوم، با استفاده از متد getContext، زمینه webgl رو از canvas مورد نظر دریافت کردیم و نتیجه رو درون متغیر ctx ریختیم. حالا ctx زمینه 3 بعدی ما هست و میتونیم هر چیزی که بخوایم رو درون اون قرار بدیم.

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

console.log(ctx);

اگر با استفاده از console.log، از متغیر ctx خروجی بگیریم، خروجی بصورت زیر خواهد بود:

میبینید که درون console مربوط به inspector مرورگر Chrome، خروجی مورد نظر اومده. همونطور که میبینید یک شئ بنام WebGLRenderingContext اومده و ویژگی‌ها و متدهای مربوط به خودش رو داره و میتونین همه اونا رو ببینید.

ما در این دوره آموزشی فقط در مورد زمینه 2 بعدی مربوط به canvas، آموزش قرار خواهیم داد و سراغ کار با webgl نمیریم. کار کردن با WebGL خیلی پیچیده هست و نیاز به پیش نیازهای زیادی داره. به دلیل اینکه کار با WebGL دشوار هست، کتابخانه ای بنام Three.js به وجود اومده که خیلی کارها رو برای شما راحت میکنه. در آینده شاید دوره مربوط به آموزش Three.js قرار دادیم و شما رو با طراحی سه بعدی در مرورگر بصورت مقدماتی آشنا کردیم.

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

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

موفق باشید

یا علی

Source