۲۵
اردیبهشت

جلسه ۰۲ : WebGL – معرفی Html5 Canva

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

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

Html5 Canvas

برای ایجاد برنامه های گرافیکی در وب، HTML-5 مجموعه ای از ویژگی های غنی مانند تبدیل های ۲D Canvas، WebGL، SVG، CSS 3D و SMIL را فراهم می کند. برای نوشتن برنامه های WebGL، ما از عنصر canvas یا بوم موجود در HTML-5 استفاده می کنیم. این فصل یک مرور کلی از عنصر HTML5 بوم ۲D را ارائه می دهد.

HTML5 Canvas چیست ؟

< HTML-5 <canvas یک گزینه آسان و قدرتمند برای طرح گرافیک با استفاده از JavaScript را فراهم می کند. این می تواند مورد استفاده برای رسم نمودار، ساخت ترکیب عکس، و یا انجام ساده (و نه خیلی ساده) انیمیشن باشد.
در اینجا یک عنصر <canvas> ساده است که دارای دو ویژگی خاص عرض و ارتفاع به همراه تمام ویژگی های HTML-5 اصلی مانند شناسه، نام و کلاس است.

بعد از پاسخ به سوال HTML5 Canvas چیست ،به سینتکس می پردازیم.

Syntax

ساختار تگ HTML canvas در زیر داده شده است. شما باید نام canvas را در داخل نقل قول های دوگانه (“”) ذکر کنید.

مثال :

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

1	<canvas id = "mycanvas" width = "100" height = "100"></canvas>

ویژگی های canvas یا بوم
برچسب canvas سه ویژگی دارد یعنی شناسه، عرض و ارتفاع.
Id-Id نشان دهنده شناسه عنصر canvas در Model Object Model (DOM) است.
عرض – عرض نشان دهنده عرض بوم است.
ارتفاع – ارتفاع نشان دهنده ارتفاع بوم است.
این ویژگی ها اندازه بوم را تعیین می کند. اگر یک برنامه نویس آنها را زیر تگ بوم مشخص نکند، مرورگرهای مانند Firefox، Chrome و Web Kit به طور پیش فرض یک عنصر بوم از اندازه ۳۰۰ × ۱۵۰ را ارائه می دهند.

مثال برای ایجاد بوم

کد زیر نشان می دهد که چگونه یک canvas ایجاد کنید. ما از CSS برای استفاده از مرز رنگی به بوم استفاده کرده ایم.

مثال :

<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

<html>

<head>

<style>

#mycanvas{border:1px solid red;}

</style>

</head>

<body>

</body>

</html>

زمینه رندر

<canvas> ابتدا خالی است. برای نمایش چیزی در عنصر بوم، ما باید از یک زبان اسکریپتی استفاده کنیم. این زبان برنامه نویسی باید به رندرینگ دسترسی داشته باشد و بر روی آن بنویسد.
عنصر بوم دارای یک روش DOM به نام ()getContext است که برای بدست آوردن زمینه رندر و توابع رسم آن استفاده می شود. این روش یک پارامتر، نوع متن ۲d را می گیرد.
برای دریافت متن مورد نظر باید کد زیر نوشته شود. شما می توانید این اسکریپت را در داخل بدنه تگ بنویسید که در زیر نشان داده شده است.

مثال :

<!DOCTYPE HTML>
<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>

      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Tutorialspoint', 70, 70);
      </script>
   </body>
</html>

<!DOCTYPE HTML>

<html>

<body>

var canvas = document.getElementById('mycanvas');

var context = canvas.getContext('2d');

context.font = '20pt Calibri';

context.fillStyle = 'green';

context.fillText('Welcome to Tutorialspoint', 70, 70);

</script>

</body>

</html>

کانتکست WebGL

HTML5 Canvas برای نوشتن برنامه های WebGL نیز استفاده می شود. برای ایجاد یک محتوای رندر WebGL بر روی عنصر بوم، شما باید رشته experimental-webgl را منتقل کنید، به جای ۲D به روش ()canvas.getContext .برخی از مرورگرها تنها “webgl” را پشتیبانی می کنند.

مثال :

<!DOCTYPE html>
<html>
   <canvas id = 'my_canvas'></canvas>
	
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
</html>

<!DOCTYPE html>

<html>

var canvas = document.getElementById('my_canvas');

var gl = canvas.getContext('experimental-webgl');

gl.clearColor(0.9,0.9,0.8,1);

gl.clear(gl.COLOR_BUFFER_BIT);

</script>

</html>

خب اینم از کانتکست WebGL .

کلام پایانی

هر عنصر Html5 Canvas می بایست یک زمینه باشد. زمینه مشخص می کند که از چه HTML5 Canvas API استفاده شود. زمینه ۲ بعدی برای رسم نمودارهای دو بعدی و دستکاری تصویر های bitmap استفاده می شود. زمینه سه بعدی برای نمودارهای سه بعدی استفاده می شود. این مفهوم به نام WebGL و OpenGL ES شناخته می شود.

به اشتراک بگذارید

HTML5 Canvas چیست ؟ ,آموزش WebGL ,زمینه WebGL ,زمینه رندر

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۲ : WebGL – معرفی Html5 Canva

مقدمه

Html5 Canvas

HTML5 Canvas چیست ؟

Syntax

مثال برای ایجاد بوم

زمینه رندر

کانتکست WebGL

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ