HTML <canvas> ਟੈਗ
تعلیم اور استعمال
<canvas> لبلاب عام طور پر اسکریپٹ کے ذریعے (غیرضروری طور پر جاوااسکریپٹ) رئال تائم میں گرافک نقاشی کی جاتی ہیں。
<canvas> لبلاب کا شفاف ہوتا ہے، یہ صرف گرافک کا کانٹینر ہوتا ہے، گرافک حقیقتاً نقاشی کئے جانے کیلئے اسکریپٹ استعمال کیا جانا چاہئے。
ਜਿਸ ਵਿੱਚ JavaScript ਨੂੰ ਨਾ ਚਾਲੂ ਕਰਨਾ ਹੈ ਅਤੇ ਜੋ canvas ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ <canvas> ਬਰਾਉਜ਼ਰ ਵਿੱਚ <canvas> ਐਲੀਮੈਂਟ ਦੇ ਅੰਦਰ ਕੋਈ ਪਾਠ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇਗਾ
ਸੁਝਾਅ
ਸਾਡੇ HTML Canvas ਟਰੇਨਿੰਗ ਵਿੱਚ ਸਿੱਖੋ ਕਿ <canvas> ਐਲੀਮੈਂਟ ਦੀ ਜਾਣਕਾਰੀ ਦੇਖੋ。
ਸਾਰੇ ਪ੍ਰਤੀਕਾਂ ਅਤੇ ਮੱਥਕਾਂ ਦੀ ਪੂਰੀ ਸੰਦਰਭ ਲਈ ਸਾਡੇ HTML ਕੈਨਵਾਸ ਸੰਦਰਭ ਮੈਨੂਅਲ.
ਉਦਾਹਰਣ
ਉਦਾਹਰਣ 1
ਇੱਕ ਲਾਲ ਚੌਕਟ ਨੂੰ ਰਿਆਲ ਟਰੇਸਿੰਗ ਕਰੋ ਅਤੇ ਇਸਨੂੰ <canvas> ਐਲੀਮੈਂਟ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ:
<canvas id="myCanvas">
ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ canvas ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ।
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
ਉਦਾਹਰਣ 2
ਇੱਕ ਹੋਰ <canvas> ਉਦਾਹਰਣ:
<canvas id="myCanvas">
ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ canvas ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ।
</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;
}
canvas ਦਾ ਇਤਿਹਾਸ
ਇਹ HTML ਐਲੀਮੈਂਟ ਕਲਾਈਟਸਾਈਡ ਵੈਕਟਰ ਗਰਾਫਿਕਸ ਲਈ ਡਿਜਾਇਨ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਆਪਣਾ ਕੋਈ ਵਿਵਹਾਰ ਨਹੀਂ ਹੈ, ਪਰ ਕਲਾਈਟਸਾਈਡ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨੂੰ ਇੱਕ ਡਰਾਇੰਗ API ਪੇਸ਼ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਸਕ੍ਰਿਪਟ ਜਿਸ ਨੂੰ ਚਿਤਰਿਤ ਕਰਨਾ ਹੈ, ਉਹ ਇੱਕ ਪੇਂਟਬੋਰਡ 'ਤੇ ਚਿਤਰਿਤ ਕਰ ਸਕੇ।
<canvas> علامت کو Apple نے Safari 1.3 ویب براوزر میں شروع کیا تھا، HTML کی اس بنیادی توسیع کا سبب یہ تھا کہ HTML کی ڈرائنگ کی صلاحیت بجائے Safari میں بجائے، Mac OS X دسک ٹاپ کے Dashboard کامپننٹ کا استعمال کی جاتی تھی، اور Apple کو ایک طرح کی داستانی نمائش اور ویب براوزر میں اس کا استعمال کرنا چاہئیے تھا۔
Firefox 1.5 اور Opera 9 دونوں کسی بھی طرح سے Safari کی قیادت کی دنبال بندی کرتے ہیں، دونوں براوزر دونوں <canvas> علامت کا تعاون کرتے ہیں。
ہم وہاں تک کہ IE میں <canvas> علامت استعمال کرسکتے ہیں، اور IE کی VML کی مدد سے، کسی مفت جسکریپٹ کا استعمال کرتے ہوئے (جسے گوگل نے شروع کیا)، ایک متعلقہ پینٹ میگنٹ بناسکتے ہیں。 دیکھو:http://excanvas.sourceforge.net/.
<canvas> کی معیاری کوشش ایک غیر رسمی جمع نے بڑھائی ہے، جو ایک ویب براوزر کی صنعت سے تعلق رکھتی ہے، اور فی الحال <canvas> کو HTML 5 منصوبے میں ایک رسمی تگ کی حیثیت دی گئی ہے。 دیکھو:http://www.whatwg.org/specs/web-apps/current-work/
<canvas> علامت اور SVG اور VML کے درمیان کی فرق
<canvas> علامت اور SVG اور VML کے درمیان ایک اہم فرق یہ ہے کہ <canvas> کو ایک بنیادی JavaScript ڈرائنگ API استعمال کیا جاتا ہے، جبکہ SVG اور VML کو ایک XML دستاویز استعمال کیا جاتا ہے تاکہ ڈرائنگ کا توصیف کیا جائے。
یہ دو طریقے کارکردگی میں مساوی ہیں، کسی بھی طریقے کو دوسرے کی نمائش میں استعمال کیا جاسکتا ہے۔ سادگی کی طرح، یہ دو طریقے بہت مختلف تھے، لیکن ہر ایک کی اپنی مضمرات اور نقصانات ہیں۔ مثلاً SVG ڈرائنگ بہت آسان طور پر ترمیم کی جاسکتی ہے، صرف کسی علامت کو توسیع سے کوچھ کرنا کافی ہوتا ہے。
یہاں کسی بھی علامت کو کسی بجائے کسی <canvas> علامت سے کوچھنے کے لئے، معمولاً ڈرائنگ کو کچھ کرنے اور دوبارہ ڈرائن کرنے کی ضرورت ہوتی ہے。
<canvas> علامت کا استعمال کیسے کیا جاتا ہے
کسی بھی Canvas ڈرائنگ API کا تعریف <canvas> علامت پر نہیں کیا جاتا، بلکہ یہ علامت کے ذریعے تعریف کیا جاتا ہے، جیسے پینٹ میگنٹ کا استعمال。 getContext() کی متدایک 'ڈرائنگ امونٹ' آئیٹم سے حاصل کی جاتی ہے。
Canvas API بھی روٹ کی نمائش کا استعمال کرتی ہے، لیکن روٹ کا تعریف یہاں متعدد طریقوں سے کیا جاتا ہے، جیسے beginPath() اور arc() کی طرح کے متعدد طو ریوں کی بجائے، نہ کہ حروف اور اعداد سے بنے استرینگس کے طور پر توصیف کیا جاتا ہے。
一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。
注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个
ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ
ਸਾਰੇ ਸੰਖਿਆਵਾਂ ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਇਸ ਅਇਤਮ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਬਰਾਉਜ਼ਰ ਦੀ ਆਖਰੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਇਆ ਗਿਆ ਹੈ。
| ਚਾਰੋਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|
| ਚਾਰੋਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
| 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
