HTML DOM Canvas ਅਬਜੈਕਟ

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

کینواس API جو JavaScript کو کینواس پر گرافک ڈرائن کرنے کی اجازت دیتا ہے。

کینواس API شپھار، لائن، منحنی، فلیٹ، متن اور تصاویر، نیز رنگ، چرخش، شفافیت اور دیگر پیکسل آپریشنز کا استعمال کرسکتا ہے。

کینواس کو HTML میں شامل کریں

آپ کینواس علامت کا استعمال کریں تاکہ کسی بھی مقام پر کینواس علامت اضافہ کریں:

ਉਦਾਹਰਣ

<canvas id="myCanvas" width="300" height="150"></canvas>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

کینواس علامت تک کس طرح رسائی حاصل کی جائی؟

آپ HTML DOM کا موٹھا getElementById() استعمال کریں تاکہ <canvas> علامت تک رسائی حاصل کریں:

const myCanvas = document.getElementById("myCanvas");

ਕੈਨਵਾਸ ਉੱਤੇ ਆਰਟ ਦਰਸਾਉਣ ਲਈ ਤੁਸੀਂ 2D ਕੰਟੈਕਟ ਦੀ ਸਥਾਪਨਾ ਕਰਨੀ ਹੋਵੇਗੀ:

const ctx = myCanvas.getContext("2d");

ਨੋਟਸ

HTML <canvas> ਐਲੀਮੈਂਟ ਆਪਣੇ ਆਪ ਵਿੱਚ ਆਰਟ ਦਰਸਾਉਣ ਦੀ ਸਮਰੱਥਾ ਨਹੀਂ ਰੱਖਦਾ。

ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਗਰਾਫਿਕਸ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਰਤਣਾ ਹੋਵੇਗਾ。

getContext() ਮੈਥਡ ਇੱਕ ਆਰਟ ਸਾਧਨਾਂ (ਮੈਥਡ) ਵਾਲੇ ਆਬਜੈਕਟ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

ਕੈਨਵਾਸ ਉੱਤੇ ਆਰਟ ਦਰਸਾਉਣ

2D ਕੰਟੈਕਟ ਦੀ ਸਥਾਪਨਾ ਕਰਨ ਤੋਂ ਬਾਅਦ ਤੁਸੀਂ ਕੈਨਵਾਸ ਉੱਤੇ ਆਰਟ ਦਰਸਾ ਸਕਦੇ ਹੋ。

ਹੇਠ ਲਿਖੇ fillRect() ਮੈਥਡ ਨੇ ਕਾਲੇ ਰੰਗ ਦਾ ਚੌਕੇਦਾਰ ਬਣਾਇਆ ਹੈ ਜਿਸਦਾ ਉੱਚਾ ਮੁੱਢਲਾ ਸਥਾਨ 20,20 ਹੈ। ਇਸ ਚੌਕੇਦਾਰ ਦਾ ਚੌਡਾਈ 150 ਪਿਕਸਲ ਅਤੇ ਉੱਚਾਈ 100 ਪਿਕਸਲ ਹੈ:

ਉਦਾਹਰਣ

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਰੰਗ ਦੀ ਵਰਤੋਂ

fillStyle ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਪੂਰਕ ਰੰਗ ਨੂੰ ਸੈਟ ਕਰਦੀ ਹੈ:

ਉਦਾਹਰਣ

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਤੁਸੀਂ ਇਸ ਨੂੰ document.createElement() ਮੈਥਡ ਦੀ ਮਦਦ ਨਾਲ ਇੱਕ ਨਵਾਂ <canvas> ਐਲੀਮੈਂਟ ਬਣਾ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸ ਨੂੰ ਮੌਜੂਦਾ HTML ਪੇਜ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹੋ:

ਉਦਾਹਰਣ

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

पथ

ਕੈਨਵਾਸ ਉੱਤੇ ਆਰਟ ਦਰਸਾਉਣ ਦਾ ਸਭ ਤੋਂ ਆਮ ਤਰੀਕਾ ਹੈ:

1. ਪਥ ਸ਼ੁਰੂ ਕਰੋ - beginPath()
2. ਇੱਕ ਬਿੱਲ ਦੇ ਨੂੰ ਜਾਣੇ - moveTo()
3. ਪਥ ਵਿੱਚ ਦਰਸਾਉਣ - lineTo()
4. ਪਥ ਦਰਸਾਉਣ - stroke()

ਉਦਾਹਰਣ

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ