ایچ تی ایم ال کینواس مرجع دستورات

ایچ تی ایم ال کینواس مرجع دستورات

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

ਕੈਂਵਸ ਦੇ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਜਾਣ ਲਈ ਸਾਡੇ HTML Canvas ਟਰੇਨਿੰਗ ਨੂੰ ਪੜ੍ਹੋ。

ਰੰਗ, ਸਟਾਈਲ ਅਤੇ ਸ਼ੇਡੋ

ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਣਨ
fillStyle ਫਿਲ ਸਟਾਈਲ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
strokeStyle ਸਟ੍ਰੋਕ ਸਟਾਈਲ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
shadowColor ਸ਼ੇਡੋ ਰੰਗ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
shadowBlur ਸ਼ੇਡੋਫਲਰ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
shadowOffsetX ਸ਼ੇਡੋਅਫਸਿੱਟ ਯੂਨਿਟ ਵਿੱਚ ਸ਼ੇਡੋਅਫਸਿੱਟ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
shadowOffsetY ਸ਼ੇਡੋਅਫਸਿੱਟ ਯੂਨਿਟ ਵਿੱਚ ਸ਼ੇਡੋਅਫਸਿੱਟ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
ਮੱਥਾ ਵਰਣਨ
createLinearGradient() ਰੇਖੀ ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਓ (ਕੈਂਵਸ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ)
createPattern() ਨਿਰਦਿਸ਼ਟ ਦਿਸ਼ਾ ਵਿੱਚ ਨਿਰਦਿਸ਼ਟ ਏਜੰਟ ਨੂੰ ਦੁਹਰਾਓ
createRadialGradient() ਰੇਡੀਅਲ/ਸਰਕਲ ਗ੍ਰੇਡੀਐਂਟ ਬਣਾਓ (ਕੈਂਵਸ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ)
addColorStop() ਰੰਗ ਅਤੇ ਸਟੋਪਸ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ

ਰੇਖਾ ਸਟਾਈਲ

ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਣਨ
lineCap ਰੇਖਾ ਦੇ ਮੁਕਤ ਸਮੁੱਚੇ ਸੁਆਲ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
lineJoin ਰੇਖਾ ਦੇ ਮੁਕਤ ਸਮੁੱਚੇ ਸੁਆਲ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
lineWidth ਮੌਜੂਦਾ ਰੇਖਾ ਚੌਡਾਈ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
miterLimit ਮਹਿੰਦਾ ਸਿਮੰਤਰ ਲੰਬਾਈ ਸੈਟ ਕਰੋ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰੋ

ਰੈਕਟੈਂਜ਼

ਮੱਥਾ ਵਰਣਨ
rect() ਰੈਕਟੈਂਜ਼ ਬਣਾਓ
fillRect() ਪੂਰਣ ਰੈਕਟੈਂਜ਼ ਬਣਾਓ
strokeRect() ਰੈਕਟੈਂਜ਼ ਵਿੱਚ ਰੈਕਟੈਂਜ਼ ਬਣਾਓ (ਬਿਨਾ ਪੂਰਣ ਕਰਨ ਵਾਲੇ)
clearRect() ਦਿੱਤੇ ਕਿਸਮ ਦੇ ਪਰਿਵਾਰ ਵਿੱਚ ਪਿਕਸੈਲਾਂ ਨੂੰ ਮਲਟੀਪਲਾਇਡ ਕਰੋ

ਰੂਟ

ਮੱਥਾ ਵਰਣਨ
fill() ਮੌਜੂਦਾ ਚਿੱਤਰਣ ਨੂੰ ਪੂਰਣ ਕਰੋ
stroke() ਪਰਿਭਾਸ਼ਿਤ ਰੂਟ ਨੂੰ ਚਿੱਤਰਿਤ ਕਰੋ
beginPath() ਇੱਕ ਨਵਾਂ ਰੂਟ ਸ਼ੁਰੂ ਕਰੋ ਜਾਂ ਮੌਜੂਦਾ ਰੂਟ ਨੂੰ ਮੁੜ ਸੁਰੂ ਕਰੋ
moveTo() ਰੂਟ ਨੂੰ ਕੈਂਵਸ ਵਿੱਚ ਨਿਰਦਿਸ਼ਟ ਪੁਆਇੰਟ 'ਤੇ ਸਥਾਨਾਂਤਰਿਤ ਕਰੋ ਅਤੇ ਕੋਈ ਰੇਖਾ ਨਹੀਂ ਬਣਾਓ
closePath() ਮੌਜੂਦਾ ਪੁਆਇੰਟ ਤੋਂ ਸ਼ੁਰੂਆਤੀ ਪੁਆਇੰਟ ਤੱਕ ਇੱਕ ਰੂਟ ਬਣਾਓ
lineTo() ਇੱਕ ਨਵਾਂ ਪੁਆਇੰਟ ਜੋੜੋ ਅਤੇ ਉਸ ਤੋਂ ਲੈ ਕੇ ਅੰਤਿਮ ਨਿਰਦਿਸ਼ਟ ਪੁਆਇੰਟ ਤੱਕ ਇੱਕ ਰੇਖਾ ਬਣਾਓ
clip() ਮੂਲ ਕੈਂਵਸ ਤੋਂ ਕਿਸੇ ਰੂਪ ਅਤੇ ਅਕਾਰ ਦਾ ਖੰਡ ਕੱਟੋ
quadraticCurveTo() ਦੂਜੇ ਪੱਧਰ ਬੇਜੇਲਸ ਸਿਰਲੇਖ ਬਣਾਓ
bezierCurveTo() ਤੀਸਰੇ ਪੱਧਰ ਬੇਜੇਲਸ ਸਿਰਲੇਖ ਬਣਾਓ
arc() ਦਾਰਚਨਾ/ਸਿਰਲੇਖ (ਚੱਕਰ ਜਾਂ ਹਿੱਸੇ ਚੱਕਰ) ਬਣਾਓ
arcTo() ਦੋ ਟੈਨਸ ਦਰਮਿਆਨ ਦਾਰਚਨਾ/ਸਿਰਲੇਖ ਬਣਾਓ
isPointInPath() ਜੇਕਰ ਨਿਰਧਾਰਿਤ ਸਥਾਨ ਮੌਜੂਦਾ ਪਥ ਵਿੱਚ ਹੈ ਤਾਂ true ਵਾਪਸ ਕਰੋ ਨਹੀਂ ਤਾਂ false ਵਾਪਸ ਕਰੋ

ਤਬਦੀਲ

ਮੱਥਾ ਵਰਣਨ
scale() ਮੌਜੂਦਾ ਚਿੱਤਰਨ ਨੂੰ ਵੱਧ ਜਾਂ ਘੱਟ ਕਰਕੇ ਸਕੇਲ ਕਰੋ
rotate() ਮੌਜੂਦਾ ਚਿੱਤਰਨ ਨੂੰ ਘੁੰਮਾਓ
translate() ਚਿੱਤਰ 'ਤੇ (0,0) ਸਥਾਨ ਨੂੰ ਮੁੜ ਮਾਪ ਕਰੋ
transform() ਮੌਜੂਦਾ ਚਿੱਤਰਨ ਟਰਾਂਸਫਾਰਮ ਮੈਟ੍ਰਿਕਸ ਦਾ ਤਬਦੀਲ ਕਰੋ
setTransform() ਮੌਜੂਦਾ ਟਰਾਂਸਫਾਰਮ ਨੂੰ ਇੱਕ ਇਕਾਈ ਮੈਟ੍ਰਿਕਸ ਵਿੱਚ ਰੀਸੈਟ ਕਰੋ ਅਤੇ ਤਬਦੀਲ () ਚਲਾਓ

ਟੈਕਸਟ

ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਣਨ
font ਟੈਕਸਟ ਸਮੱਗਰੀ ਦੀ ਮੌਜੂਦਾ ਫੋਂਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸੈਟ ਕਰੋ ਜਾਂ ਵਾਪਸ ਕਰੋ
textAlign ਟੈਕਸਟ ਸਮੱਗਰੀ ਦੀ ਮੌਜੂਦਾ ਹਾਰਡ ਪਾਸਿੰਗ ਸੈਟ ਕਰੋ ਜਾਂ ਵਾਪਸ ਕਰੋ
textBaseline ਟੈਕਸਟ ਚਿੱਤਰਨ ਵਿੱਚ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਮੌਜੂਦਾ ਟੈਕਸਟ ਬੇਸਲਾਈਨ ਸੈਟ ਕਰੋ ਜਾਂ ਵਾਪਸ ਕਰੋ
ਮੱਥਾ ਵਰਣਨ
fillText() ਚਿੱਤਰ 'ਤੇ 'ਪੂਰਣਾ' ਟੈਕਸਟ ਚਿੱਤਰਿਤ ਕਰੋ
strokeText() ਚਿੱਤਰ 'ਤੇ ਟੈਕਸਟ ਚਿੱਤਰਿਤ ਕਰੋ (ਖਾਲੀ ਪੂਰਣਾ)
measureText() ਨਿਰਧਾਰਿਤ ਟੈਕਸਟ ਦੀ ਚੌੜਾਈ ਵਾਲਾ ਇੱਕ ਦਾਤਾ ਵਾਪਸ ਕਰੋ

ਚਿੱਤਰ ਚਿੱਤਰਨ

ਮੱਥਾ ਵਰਣਨ
drawImage() ਚਿੱਤਰ, ਚਿੱਤਰਾਂ ਜਾਂ ਵੀਡੀਓ ਨੂੰ ਚਿੱਤਰਾਂ 'ਤੇ ਚਿੱਤਰਿਤ ਕਰੋ

ਪਿਕਸਲ ਪ੍ਰਕਿਰਿਆ

ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਣਨ
width ImageData ਦਾਤਾ ਦੀ ਚੌੜਾਈ ਵਾਪਸ ਕਰੋ
height ImageData ਦਾਤਾ ਦੀ ਉਚਾਈ ਵਾਪਸ ਕਰੋ
data ਨਿਰਧਾਰਿਤ ImageData ਦਾਤਾ ਦੇ ਚਿੱਤਰ ਡਾਟਾ ਨੂੰ ਵਾਪਸ ਕਰਨ ਵਾਲਾ ਇੱਕ ਦਾਤਾ ਵਾਪਸ ਕਰੋ
ਮੱਥਾ ਵਰਣਨ
createImageData() ਨਵਾਂ ਖਾਲੀ ImageData ਦਾਤਾ ਬਣਾਓ
getImageData() ImageData ਦਾਤਾ ਵਾਪਸ ਕਰੋ ਜੋ ਚਿੱਤਰ 'ਤੇ ਨਿਰਧਾਰਿਤ ਚੌਕਾ ਦੇ ਪਿਕਸਲ ਡਾਟਾ ਨੂੰ ਨਕਲ ਕਰਦਾ ਹੈ
putImageData() ਚਿੱਤਰ ਅਤੇ ਪਿਛਲੇ ImageData ਦਾਤਾ ਨੂੰ ਚਿੱਤਰਾਂ 'ਤੇ ਵਾਪਸ ਪਾਓ

ਸੰਗਠਨ

ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਣਨ
globalAlpha ਚਿੱਤਰਨ ਦੀ ਮੌਜੂਦਾ alpha ਜਾਂ ਪਾਰਦਰਸ਼ਤਾ ਸੈਟ ਕਰੋ ਜਾਂ ਵਾਪਸ ਕਰੋ
globalCompositeOperation ਨਵੀਂ ਚਿੱਤਰ ਨੂੰ ਮੌਜੂਦਾ ਚਿੱਤਰ 'ਤੇ ਚਿੱਤਰਿਤ ਕਰਨ ਲਈ ਨਵਾਂ ਚਿੱਤਰ ਸੈਟ ਕਰੋ ਜਾਂ ਵਾਪਸ ਕਰੋ

ਹੋਰ

ਮੱਥਾ ਵਰਣਨ
save() ਮੌਜੂਦਾ ਮਾਹੌਲ ਦੀ ਸਥਿਤੀ ਸੰਭਾਲੋ
restore() ਪਹਿਲਾਂ ਸੰਭਾਲੀ ਹੋਈ ਪਥ ਸਥਿਤੀ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇਣ ਲਈ ਵਾਪਸ ਕਰੋ
createEvent() 　
getContext() 　
toDataURL()