تدریس HTML Canvas

عنصر <canvas> HTML کا استعمال ویب سائٹ پر گرافکس بنانے کے لئے کیا جاتا ہے。

بالائی گرافکس <canvas> کے ذریعے بنایا گیا ہے۔

یہ چار عناصر دکھاتا ہے: لال مربع، پیچیدہ رنگ کا مربع، کثیر رنگ کا مربع اور کثیر رنگ کا متن۔

ایچ تی ایم پی پی کینواس کیا ہے؟

ایچ تی ایم پی پی <canvas> عناصر کو اس کا استعمال کریئے تاکہ اس کا گرافکس کی تعمیر کی جاسکے (یعنی جاوا اسکریپٹ کا استعمال کریئے جاتا ہے)۔

<canvas> عناصر صرف گرافکس کا کانٹینر ہیں۔ آپ کو اس کا استعمال کریئے تاکہ وائیجیگرافکس درج کریئے جاسکے۔

کینواس کو راستے، مربع، دائیروں، متن اور تصاویر کو درج کرنے کیلئے متعدد متد فراہم کرتی ہیں۔

ایچ تی ایم پی پی کینواس کو متن درج کیا جاسکتا ہے

کینواس کو رنگدار متن درج کیا جاسکتا ہے اور اس میں آنیمیشن بھی شامل کیا جاسکتا ہے۔

ایچ تی ایم پی پی کینواس کو گرافکس درج کیا جاسکتا ہے

کینواس کو گرافکس اور چارٹوں کی تعمیر کیلئے استعمال کیا جاسکتا ہے اور اس کی طاقتور قابلیت رکھتی ہے۔

ایچ تی ایم پی پی کینواس کو آنیمیشن کیا جاسکتا ہے

کینواس آئیٹم موٹا سکتا ہے۔ ہر چیزی ممکن ہے: سادے بولی بیچ سے لے کر پیچیدہ آنیمیشن تک۔

ایچ تی ایم پی پی کینواس قابل رابط ہے

کینواس کو جاوا اسکریپٹ ایونٹ پر جواب دینا سکتا ہے۔

کینواس کو کسی بھی یوزر آپریشن پر جواب دینا سکتا ہے (کلک، موس کلک، بٹن کلک، انگل میں موسمی جنبش)۔

ایچ تی ایم پی پی کینواس کو گیموں کیلئے استعمال کیا جاسکتا ہے

کینواس کی متعدد متدوالی بھیتی کی وجہ سے ایچ تی ایم پی پی گیم ایپلی کیشنوں کو بہت ساری ممکنات فراہم کرتی ہیں۔

کینواس مثال

ایچ تی ایم پی پی میں، <canvas> عناصر کا نظر یہی آتا ہے:

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas> عناصر کو id پریمپل ضروری ہوتا ہے تاکہ جاوا اسکریپٹ اس کو استعمال کرسکے۔

وائڈتھ اور ہائیٹ کی اپریئنسیز کینواس کی بڑائی کا تعین کرنے کے لئے ضروری ہیں۔

نکات: ایک ایچ تی ایم پی پی کی صفح پر کینواس عناصر کی کتنی بھی کچھ نہیں ہو سکتی ہیں۔

دفعہ کی صورت میں، <canvas> عناصر کو بوردر یا کچھ بھی نہیں ہوتا ہے۔

بوردر اضافہ کرنا چاہئیے تو استایل پریمپل بجائی استایل کا استعمال کریئے:

مثال

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

خود کا تجربہ کریئے

آئندہ چپتروں میں کینواس پر نقاشی کرنے کا طریقہ بتایا جائے گا۔

ایک بار دیکھیئے:

کوڈوو3 سی کے مکمل کینواس مراجع دستور زبان

براووزروم کا سپورٹ

<canvas> عناصر HTML5 معیار (2014) میں ہیں۔

سارنوئی براووزروم <canvas> کا سپورٹ کرتا ہے: