برچسب <canvas> HTML

تعریف اور استعمال

<canvas> لبلب عام طور پر اسکریپٹ کے ذریعے (غیر معمولی طور پر جاوا اسکریپٹ) آج کا وقت میں گرافک بندل کیاجاتا ہے۔

<canvas> لبلب کا رنگ شفاف ہوتا ہے، وہ صرف گرافک کا کانٹینر ہوتا ہے، گرافک حقیقت میں بندل کرنا ضروری ہوتا ہے۔

درمیان جس میں جاوا اسکریپٹ کو غیر فعال کردیا گیا ہے یا جس میں اس کا استعمال نہیں کیا جاسکتا <canvas> میں، <canvas> عنصر کے اندر کا کسی بھی متنی

نکات

کینواس میں کیا سیکھیں، <canvas> عنصر کی مزید معلومات کا دورہ کریں

تمام خصوصیات اور طریقوں کا مکمل مراجع دیکھنے کے لئے، ہمارے دستورالعمل‌های مرجع کانواس HTML.

مثال

مثال 1

ایک نارنجی مربع بناکر، اس کا نمائش کینواس علامت میں کریں:

<canvas id="myCanvas">
آپ کا براوزر کینواس تگ کو مدد نہیں دیتا۔
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

آپ خود پرتب کریں

مثال 2

کینواس کا ایک دوسرا مثال:

<canvas id="myCanvas">
آپ کا براوزر کینواس تگ کو مدد نہیں دیتا۔
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// شفافیت کو کھولنا
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

آپ خود پرتب کریں

خصوصیت

خصوصیت نمبر وصف
height پیکسل نمبر کینواس کی اونچائی کا تعین کرتا ہے۔ مقصد کا نمبر 150 ہے۔
width پیکسل نمبر کینواس کی چوڑائی کا تعین کرتا ہے۔ مقصد کا نمبر 300 ہے۔

عالمی شرطی

<canvas> تگ کا استعمال HTML میں عالمی شرطی.

شرطی

<canvas> تگ کا استعمال HTML میں واقعی شرطی.

مقصد کا CSS سیٹنگ

بہترین براوزرز کو دراصل مندرجہ ذیل نمبرین کی دفعات کو نمائش دیتی ہیں <canvas> عنصر:

canvas {
  height: 150px;
  width: 300px;
}

آپ خود پرتب کریں

کینواس کا تاریخی

یہ HTML علامت کلائنٹ ویکتور گرافکس کے لئے ڈیزائن کی گئی ہے۔ یہ خود کو کوئی رفتار نہیں رکھتا، لیکن کلائنٹ جاوا اسکریپٹ کو ایک ڈرائنگ اپی کا مظاہرہ دیتا ہے تاکہ اسکریپٹ کا استعمال کرکے چیزوں کو ڈرینے کا کام کرسکے جو انہوں نے ڈرینا ہو، یہ ایک کینواس پر ڈرینا جائیں گے۔

<canvas> علامت کو اپل نے سافری 1.3 وائب براؤزر میں شروع کیا تھا، اس کا اصولی استعمال یہ تھا کہ سافری میں درایوینگ کی صلاحیت، جو مک کی دسینوس کی ڈیش بورڈ کامپاننٹ کا استعمال کرتی ہے، اور اپل کی خواہش یہ تھی کہ ڈیش بورڈ میں اسکریپٹ کا استعمال کیا جائے تاکہ درایوینگ کی جاسکتی ہو۔

فائرفاکس 1.5 اور اپریا 9 سافری کی قیادت کی دنبال میں آئی، دونوں براؤزر <canvas> علامت کا استعمال کرتے ہیں。

ہم ایک ایسا کینواس علامت استعمال کرسکتے ہیں، جو آئی ای کے ومل کی مدد سے بنا ہوا ہے، اور آئی ای کا ومل کی مدد سے کانواس کی سازگار کاری کا کام کرسکتا ہے، جو گوگل کی قیادت میں مفت جاوا اسکریپٹ کا استعمال کرسکتا ہے。 ملاحظہ:http://excanvas.sourceforge.net/.

<canvas> کی معیاری کوشش ایک وائب براؤزر مینوفیکچرر کی غیر رسمی ایکائی کے ذریعہ پیش کی جارہی ہیں، اور اب <canvas> ایچ تی ایم ل 5 منصوبہ میں ایک رسمی علامت بن چکا ہے。 ملاحظہ:http://www.whatwg.org/specs/web-apps/current-work/

<canvas> علامت اور SVG اور VML کے درمیان کی فرق

<canvas> علامت اور SVG اور VML کے درمیان ایک اہم فرق یہ ہے کہ <canvas> کو جسمانی طور پر جاوا اسکریپٹ کا استعمال کیا جاتا ہے، جبکہ SVG اور VML درایوینگ کو ایک ایک زبان کا استعمال کیا جاتا ہے، جو ایک XML دستاویز کا استعمال کرتا ہے。

یہ دو طریقے کارکردگی میں مساوی ہیں، کسی بھی کا استعمال کسی کا استعمال کردیں جاسکتا ہے، سادگی سے دیکھنے پر وہ بہت مختلف لگتے ہیں، لیکن ہر ایک کی قوت اور ناچاریتی ہیں، مثلاً SVG درایوینگ بہت آسان طور پر ترمیم کی جاسکتی ہے، صرف کافی علامت کو برآمد کردیں جاسکتا ہے。

یہاں سے علامت کو برآمد کردیں، اکثر درایوینگ کو ختم کردیں اور دوبارہ درایوینگ کیا جائے تاکہ وہ دوبارہ درایوینگ کیا جائے。

کیا کینواس علامت کا استعمال کردیں تاکہ درایوینگ کیا جائے؟

بہترین کینواس درایوینگ ای پی آئی، <canvas> علامت پر تعریف نہیں کی گئی ہیں، بلکہ ان کا تعریف کینواس کے ذریعہ کیا جاتا ہے。 getContext() متدوالیہایک 'درایوینگ میں' آئیٹم سے حاصل کیا جاتا ہے。

کانواس ای پی آی بھی راستے کی نمائش کا استعمال کرتا ہے، لیکن راستہ ایک سلسلہ متدوالیوں کے ذریعہ معین کیا جاتا ہے، نہ کہ حروف اور اعداد کی جملات کے طور پر، مثلاً beginPath() اور arc() متدوالیوں کا استعمال کرنا。

بعد از تعریف مسیر، روش‌های دیگر مانند fill()، عمل بر روی این مسیر انجام می‌شوند. ویژگی‌های مختلف محیط رندر مانند fillStyle توضیح می‌دهند که این عمل چگونه استفاده می‌شود.

توجه:یکی از دلایل کوچک بودن Canvas API این است که هیچ پشتیبانی برای نوشتن متن ارائه نمی‌دهد. برای اضافه کردن متن به یک تصویر <canvas>، باید یا آن را خودتان بکشید و با تصویر بیت‌مپ ترکیب کنید، یا از CSS positioning در بالای <canvas> برای پوشاندن متن HTML استفاده کنید.

پشتیبانی مرورگر

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

کروم ایج فایرفاکس سافاری اپرا
کروم ایج فایرفاکس سافاری اپرا
4.0 9.0 2.0 3.1 9.0