HTML canvas fillText() ਮੱਥਾ

HTML5 Canvas ਸੰਦਰਭ ਮੁੱਦਾ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

fillText() ਮੱਥਾ ਵਰਤੋਂ ਨਾਲ ਕੈਂਵਸ 'ਤੇ ਰੰਗ ਨਾਲ ਭਰੇ ਟੈਕਸਟ ਦਿਖਾਓ। ਟੈਕਸਟ ਦੀ ਮੂਲ ਰੰਗ ਕਾਲੀ ਹੈ。

ਸੁਝਾਅ:ਵਰਤੋਂ font ਪ੍ਰਤੀਭਾਵ ਨਾਲ ਫੋਂਟ ਅਤੇ ਮਾਪ ਨਿਰਧਾਰਤ ਕਰੋ ਅਤੇ fillStyle ਪਾਠ ਨੂੰ ਹੋਰ ਰੰਗ ਜਾਂ ਗਰੇਡੀਐਂਟ ਨਾਲ ਰੇਂਡਰ ਕਰਨ ਲਈ ਪ੍ਰਤੀਭਾਵ

ਉਦਾਹਰਣ

ਵਰਤੋਂ fillText() ਨਾਲ ਕੈਂਵਸ 'ਤੇ ਟੈਕਸਟ "Hello world!" ਅਤੇ "codew3c.com" ਲਿਖੋ:

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ HTML5 ਕੈਂਵਸ ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// ਕ੍ਰਮਵਾਰ ਗਰੇਡੀਐਂਟ ਬਣਾਓ
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// ਗਰੇਡੀਐਂਟ ਨਾਲ ਰੰਗ ਭਰੋ
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);

ਖੁਦ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਵਿਚਾਰਧਾਰਾ

context.fillText(text,x,y,maxWidth);

ਪੈਰਾਮੀਟਰ ਕੀਮਤ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
text ਕੈਂਵਾਸ 'ਤੇ ਬਾਹਰੀ ਲਿਖਣ ਵਾਲਾ ਟੈਕਸਟ
x ਲਿਖਣ ਵਾਲੇ ਟੈਕਸਟ ਦੀ x ਸਥਿਤੀ ਦੇ ਸਥਾਨ (ਕੈਂਵਾਸ ਨਾਲ ਸਬੰਧਤ)
y ਲਿਖਣ ਵਾਲੇ ਟੈਕਸਟ ਦੀ y ਸਥਿਤੀ ਦੇ ਸਥਾਨ (ਕੈਂਵਾਸ ਨਾਲ ਸਬੰਧਤ)
maxWidth ਵਿਕਲਪਿਤ ਹੈ।ਮਹੱਤਵਪੂਰਨ ਟੈਕਸਟ ਚੌਡਾਈ, ਪਿਕਸਲ ਵਿੱਚ ਮਾਪਿਆ ਗਿਆ ਹੈ。

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

ਸਾਰੇ ਨੰਬਰ ਸਬੰਧੀ ਪਹਿਲੀ ਸਮਰਥਨ ਕਰਨ ਵਾਲੀ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਦਿੱਤੀ ਗਈ ਹੈ。

ਚਰਾਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਾਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
4.0 9.0 3.6 4.0 10.1

ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਇਸ ਤੋਂ ਪਹਿਲੇ ਦੀਆਂ ਸੰਸਕਰਣ ਨਹੀਂ <canvas> ਐਲੀਮੈਂਟ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ。

HTML5 Canvas ਸੰਦਰਭ ਮੁੱਦਾ