HTML ਕੈਨਵਾਸ ਟੈਕਸਟ

ਕੈਂਵਾਸ 'ਤੇ ਟੈਕਸਟ ਦਰਸਾਉਣਾ

ਕੈਂਵਾਸ 'ਤੇ ਟੈਕਸਟ ਦਰਸਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਮੱਥਕ ਹਨ:

• font - ਟੈਕਸਟ ਦੇ ਫੰਟ ਪ੍ਰਤੀਭਾਵ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ
• fillText(text,x,y) - ਕੈਂਵਾਸ 'ਤੇ "ਰੰਗ ਫਿਲਟਰ" ਵਾਲਾ ਟੈਕਸਟ ਦਰਸਾਓ
• strokeText(text,x,y) - ਕੈਂਵਾਸ 'ਤੇ ਟੈਕਸਟ (ਰੰਗ ਨਹੀਂ ਫਿਲਟਰ) ਦਰਸਾਓ

fillText() ਦੀ ਵਰਤੋਂ

ਉਦਾਹਰਣ

ਫੰਟ ਨੂੰ "30px Arial" ਸੈਟ ਕਰੋ ਅਤੇ ਕੈਂਵਾਸ 'ਤੇ ਰੰਗ ਫਿਲਟਰ ਵਾਲਾ ਟੈਕਸਟ ਲਿਖੋ:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

ਸਵੈ ਕੋਸ਼ਿਸ਼ ਕਰੋ

strokeText() ਦੀ ਵਰਤੋਂ

ਉਦਾਹਰਣ

ਫੰਟ ਨੂੰ "30px Arial" ਸੈਟ ਕਰੋ ਅਤੇ ਕੈਂਵਾਸ 'ਤੇ ਟੈਕਸਟ ਲਿਖੋ (ਰੰਗ ਨਹੀਂ ਫਿਲਟਰ):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

ਸਵੈ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਰੰਗ ਜੋੜੋ ਅਤੇ ਟੈਕਸਟ ਕੇਂਦਰ ਵਿੱਚ ਲਿਖੋ

ਉਦਾਹਰਣ

ਫੰਟ ਨੂੰ "30px Comic Sans MS" ਸੈਟ ਕਰੋ ਅਤੇ ਕੈਂਵਾਸ ਵਿੱਚ ਲਾਲ ਰੰਗ ਦਾ ਟੈਕਸਟ ਕੇਂਦਰ ਵਿੱਚ ਲਿਖੋ:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

ਸਵੈ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਇਸ ਵੱਲ ਦੇਖੋ:

CodeW3C.com ਦਾ ਪੂਰਾ Canvas ਸੰਦਰਭ ਮੈਨੂਅਲ