HTML5 Canvas
- ਪਿਛਲਾ ਪੰਨਾ HTML Input ਫਾਰਮ ਪ੍ਰਤੀਯੋਗਿਤਾ
- ਅਗਲਾ ਪੰਨਾ HTML5 SVG
canvas ਐਲੀਮੈਂਟ ਨੇ ਵੈੱਬਸਾਈਟ 'ਤੇ ਚਿੱਤਰ ਦਿਖਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。
Canvas ਕੀ ਹੈ?
HTML5 ਦੇ canvas ਐਲੀਮੈਂਟ ਨੇ ਵੈੱਬਸਾਈਟ 'ਤੇ ਚਿੱਤਰ ਦਿਖਾਉਣ ਲਈ JavaScript ਵਰਤਦਾ ਹੈ。
ਚਿੱਤਰਨ ਖੇਤਰ ਇੱਕ ਚੌਰਾ ਖੇਤਰ ਹੈ, ਤੁਸੀਂ ਉਸ ਦੇ ਹਰੇਕ ਪਿਕਸਲ ਨੂੰ ਕੰਟਰੋਲ ਕਰ ਸਕਦੇ ਹੋ
canvas ਕਈ ਪਥ, ਚੌਰਾ, ਗੋਲ, ਅਕਸ਼ਰ ਅਤੇ ਚਿੱਤਰ ਜੋੜਣ ਦੇ ਤਰੀਕੇ ਰੱਖਦਾ ਹੈ。
Canvas ਐਲੀਮੈਂਟ ਬਣਾਓ
HTML5 ਪੰਨੇ ਵਿੱਚ canvas ਐਲੀਮੈਂਟ ਜੋੜੋ。
ਐਲੀਮੈਂਟ ਦੇ id, ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ:
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript ਦੁਆਰਾ ਚਿੱਤਰਨ
canvas ਐਲੀਮੈਂਟ ਖੁਦ ਦਿਖਾਈ ਦੇਣ ਦੀ ਸਮਰੱਥਾ ਨਹੀਂ ਰੱਖਦਾ। ਸਾਰਾ ਚਿੱਤਰਨ ਕੰਮ JavaScript ਅੰਦਰ ਕੀਤਾ ਜਾਣਾ ਹੈ:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript ਦੁਆਰਾ id ਨਾਲ canvas ਐਲੀਮੈਂਟ ਲੱਭਣਾ ਹੈ:
var c=document.getElementById("myCanvas");
ਫਿਰ, context ਆਬਜੈਕਟ ਬਣਾਓ:
var cxt=c.getContext("2d");
getContext("2d") ਆਬਜੈਕਟ ਮੁੱਢਲਾ ਐੱਚਟੀਐੱਮਐੱਲ5 ਆਬਜੈਕਟ ਹੈ, ਜਿਸ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਪੇਸ਼ਕਾਰੀ ਪਥ, ਚੱਕਰ, ਗੋਲਾ, ਅੱਖਰ ਅਤੇ ਚਿੱਤਰ ਜੋੜਣ ਦੇ ਤਰੀਕੇ ਹਨ。
ਹੇਠ ਦੀਆਂ ਦੋ ਲਾਈਨਾਂ ਨਾਲ ਲਾਲ ਚੱਕਰ ਦਰਸਾਓ:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle ਮੈਥਡ ਉਸ ਨੂੰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਰੰਗ ਦਿੰਦਾ ਹੈ, fillRect ਮੈਥਡ ਸ਼ਕਲ, ਸਥਾਨ ਅਤੇ ਸਾਇਜ਼ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
ਕੋਆਰਡੀਨੇਟ ਸਮਝਣ
ਉੱਪਰੋਕਤ fillRect ਮੈਥਡ ਪੈਰਾਮੀਟਰ (0,0,150,75) ਹੈ。
ਮਤਲਬ: ਕੈਂਵਾਸ ਉੱਤੇ 150x75 ਦਾ ਚੱਕਰ ਦਰਸਾਓ, ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਸਥਾਨ (0,0) ਤੋਂ。
ਹੇਠ ਦੇ ਤਸਵੀਰ ਵਿੱਚ ਦਿਖਾਇਆ ਹੈ, ਕੈਂਵਾਸ ਦੇ ਏਕਸ ਅਤੇ ਵਾਈ ਕੋਆਰਡੀਨੇਟ ਕੈਂਵਾਸ ਉੱਤੇ ਚਿੱਤਰਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ。
ਉਦਾਹਰਣ: ਸਿਰਫ ਚੱਕਰ ਉੱਤੇ ਮਾਉਸ ਨੂੰ ਸਮੇਟਣ ਨਾਲ ਨਿਰਧਾਰਿਤ ਹੋਵੇਗਾ ਕੋਆਰਡੀਨੇਟ
ਹੋਰ ਕੈਂਵਾਸ ਉਦਾਹਰਣ
ਹੇਠ ਦੇ ਕੈਂਵਾਸ ਈਲੈਮੈਂਟ ਉੱਤੇ ਚਿੱਤਰਨ ਦੇ ਹੋਰ ਉਦਾਹਰਣ:
ਉਦਾਹਰਣ - ਰੇਖਾ
ਇੱਕ ਰੇਖਾ ਦਰਸਾਉਣ ਲਈ ਸ਼ੁਰੂ ਅਤੇ ਮੁਕਤ ਸਥਾਨ ਦੇਣ:
JavaScript ਕੋਡ:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas ਐਲੀਮੈਂਟ:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ canvas ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ. </canvas>
ਉਦਾਹਰਣ - ਗੋਲਾ
ਸਾਇਜ਼, ਰੰਗ ਅਤੇ ਸਥਾਨ ਨਾਲ ਇੱਕ ਗੋਲਾ ਦਰਸਾਓ:
JavaScript ਕੋਡ:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
canvas ਐਲੀਮੈਂਟ:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ canvas ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ. </canvas>
ਉਦਾਹਰਣ - ਗਰੇਡੀਏਂਟ
ਤੁਸੀਂ ਚੁਣੀ ਹੋਈ ਰੰਗ ਨਾਲ ਗਰੇਡੀਏਂਟ ਬੈਕਗਰਾਊਂਡ ਦਰਸਾਓ:
JavaScript ਕੋਡ:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
canvas ਐਲੀਮੈਂਟ:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ canvas ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ. </canvas>
ਉਦਾਹਰਣ - ਚਿੱਤਰ
ਇੱਕ ਚਿੱਤਰ ਕੈਨਵਾਸ 'ਤੇ ਰੱਖੋ:
JavaScript ਕੋਡ:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
canvas ਐਲੀਮੈਂਟ:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ HTML5 ਕੈਨਵਾਸ ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ。 </canvas>
HTML ਕੈਨਵਾਸ ਸਿੱਖਿਆ
ਕੈਨਵਾਸ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ ਸੈਰ ਕਰੋ HTML ਕੈਨਵਾਸ ਸਿੱਖਿਆ.
- ਪਿਛਲਾ ਪੰਨਾ HTML Input ਫਾਰਮ ਪ੍ਰਤੀਯੋਗਿਤਾ
- ਅਗਲਾ ਪੰਨਾ HTML5 SVG
