HTML Canvas ਸਿੱਖਿਆ

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ <canvas> ਈਲੈਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ。

HTML <canvas> ਈਲੈਮੈਂਟ ਵਿੱਚ ਵੈੱਬਸਾਈਟ 'ਤੇ ਗਰਾਫਿਕਸ ਦਿਖਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਉੱਪਰੋਕਤ ਗਰਾਫਿਕਸ <canvas> ਰਾਹੀਂ ਬਣਾਇਆ ਗਿਆ ਹੈ。

ਇਹ ਚਾਰ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਦਿਖਾਉਂਦਾ ਹੈ: ਲਾਲ ਸਿੱਧਾ, ਤਿਰੰਗਾ ਸਿੱਧਾ, ਬਹੁਰੰਗੀ ਸਿੱਧਾ ਅਤੇ ਬਹੁਰੰਗੀ ਟੈਕਸਟ。

HTML Canvas ਕੀ ਹੈ?

HTML <canvas> ਐਲੀਮੈਂਟ ਸਕ੍ਰਿਪਟ (ਆਮ ਤੌਰ 'ਤੇ JavaScript) ਰਾਹੀਂ ਗਰਾਫਿਕਸ ਨੂੰ ਗਤੀਸ਼ੀਲ ਢਾਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

<canvas> ਐਲੀਮੈਂਟ ਗਰਾਫਿਕਸ ਦਾ ਕੰਟੇਨਰ ਹੈ।ਤੁਸੀਂ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਾਸਤਵਿਕ ਗਰਾਫਿਕਸ ਦਰਸਾਉਣਾ ਹੋਵੇਗਾ。

Canvas ਕੋਲ ਪਾਥ, ਬਾਕਸ, ਸਰਕਲ, ਟੈਕਸਟ ਅਤੇ ਇਮੇਜ਼ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਕਈ ਤਰ੍ਹਾਂ ਦੇ ਮੱਥਦਾਰ ਹਨ。

HTML Canvas ਨੂੰ ਟੈਕਸਟ ਦਰਸਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ

Canvas ਨੂੰ ਰੰਗੀਨ ਟੈਕਸਟ ਦਰਸਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ ਆਨੀਮੇਸ਼ਨ ਵੀ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

HTML Canvas ਨੂੰ ਗਰਾਫਿਕਸ ਦਰਸਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ

Canvas ਨੂੰ ਗਰਾਫਿਕਸ ਅਤੇ ਚਾਰਟਾਂ ਦੀ ਗਰਾਫਿਕਲ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਮਜ਼ਬੂਤ ਸਮਰੱਥਾ ਹੈ。

HTML Canvas ਨੂੰ ਆਨੀਮੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ

Canvas ਦਾ ਪ੍ਰਤੀਯੋਗੀ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਹਰ ਚੀਜ਼ ਸੰਭਵ ਹੈ: ਸਰਲ ਬੰਦੂਕ ਤੋਂ ਲੈ ਕੇ ਕੰਪਲੈਕਸ ਆਨੀਮੇਸ਼ਨ ਤੱਕ。

HTML Canvas ਇੰਟਰੈਕਟਿਵ ਹੈ

Canvas ਕੋਲ JavaScript ਈਵੈਂਟਾਂ ਨੂੰ ਜਵਾਬ ਦੇਣ ਦੀ ਸਮਰੱਥਾ ਹੈ。

Canvas ਕੋਲ ਕਿਸੇ ਵੀ ਯੂਜ਼ਰ ਐਕਸੀਅਨ ਨੂੰ ਜਵਾਬ ਦੇਣ ਦੀ ਸਮਰੱਥਾ ਹੈ (ਬਟਨ ਕਲਿੱਕ, ਮਾਉਸ ਕਲਿੱਕ, ਬਟਨ ਕਲਿੱਕ, ਹੱਥ ਗਤੀ)

HTML Canvas ਨੂੰ ਗੇਮ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ

Canvas ਦੀਆਂ ਆਨੀਮੇਸ਼ਨ ਮੱਥਦਾਰ ਹੈ ਅਤੇ HTML ਗੇਮ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਕਈ ਸੰਭਾਵਨਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ。

Canvas ਉਦਾਹਰਣ

HTML ਵਿੱਚ, <canvas> ਐਲੀਮੈਂਟ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

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

<canvas> ਐਲੀਮੈਂਟ ਕੋਲ id ਜਾਂਚ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਜੋ JavaScript ਇਸ ਨੂੰ ਰੂਪ ਰੇਖਾ ਕਰ ਸਕੇ。

width ਅਤੇ height ਜਾਂਚ ਪ੍ਰਤੀ ਕੈਂਵਾਸ ਦਾ ਆਕਾਰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹਨ。

ਸੁਝਾਅ: ਇੱਕ HTML ਪੰਨੇ 'ਤੇ ਕਈ <canvas> ਐਲੀਮੈਂਟ ਹੋ ਸਕਦੇ ਹਨ。

ਮੂਲ ਰੂਪ ਵਿੱਚ, <canvas> ਐਲੀਮੈਂਟ ਬਾਹਰੀ ਰੰਗ ਅਤੇ ਕੰਟੈਂਟ ਨਹੀਂ ਹੈ。

ਕਿਉਂਕਿ ਬਾਹਰੀ ਰੰਗ ਜੋੜਨਾ ਹੈ, ਤਾਂ style ਜਾਂਚ ਵਰਤੋਂ ਕਰੋ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਤੌਰ 'ਤੇ ਸਿਖਾਓ

ਆਉਣ ਵਾਲੇ ਚਾਪਟਰਾਂ ਵਿੱਚ ਕਿਵੇਂ ਕੈਂਵਾਸ 'ਤੇ ਚਿੱਤਰਨ ਕੀਤਾ ਜਾਵੇਗਾ ਦੇਣ ਦਾ ਪ੍ਰਸਤਾਵ ਹੈ。

ਇਹ ਵੀ ਦੇਖੋ:

CodeW3C.com ਦਾ ਪੂਰਾ Canvas ਸੰਦਰਭ ਨਿਰਦੇਸ਼

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

<canvas> ਐਲੀਮੈਂਟ HTML5 ਸਟੈਂਡਰਡ (2014) ਹੈ。

ਸਾਰੇ ਆਧੁਨਿਕ ਬਰਾਊਜ਼ਰ <canvas> ਨੂੰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ:

ਚਰੋਮ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ IE
ਚਰੋਮ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ IE
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ 9-11