Canvas strokeStyle ਪ੍ਰਤੀਯੋਗੀ

Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

strokeStyle ਪੇਂਟ ਰੰਗ, ਗਰੇਡੀਐਂਟ ਜਾਂ ਪੈਟਰਨ ਨੂੰ ਸੈਟ ਕਰਨ ਲਈ ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ ਵਰਤੋਂ ਕਰੋ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਇੱਕ ਚੌਕਾ ਦਿਖਾਓ। ਨੀਲੇ ਪੇਂਟ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰੋ:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਗਣਤਰ

context.strokeStyle=color|gradient|pattern;

ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
color ਪੇਂਟ ਪੇਂਟ ਰੰਗ ਨੂੰ ਸੂਚਿਤ ਕਰਦਾ ਹੈ CSS ਰੰਗ ਮੁੱਲ) ਦੀ ਮੂਲ ਮੁੱਲ #000000 ਹੈ。
gradient ਪੂਰਣ ਬਿੰਦੂ ਨੂੰ ਭਰਨ ਲਈ ਵਰਤੇ ਗਰੇਡੀਐਂਟ ਆਬਜੈਕਟ (ਲਾਇਨਰਜਾਂਰੇਡੀਅਕਟਿਵ)。
pattern pattern ਪੇਂਟ ਲਈ ਪੈਟਰਨ ਆਬਜੈਕਟ ਵਰਤੋਂ ਕਰੋ。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: #000000

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

ਇੱਕ ਚੌਕਾ ਦਿਖਾਓ। ਗਰੇਡੀਐਂਟ ਪੇਂਟ ਦੀ ਵਰਤੋਂ ਕਰੋ:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// ਗਰੇਡੀਐਂਟ ਨਾਲ ਭਰਨਾ
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 3

ਇੱਕ ਗਰੇਡੀਐਂਟ ਪੇਂਟ ਨਾਲ ਟੈਕਸਟ "codew3c.com" ਲਿਖੋ:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
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.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

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

ਸਾਰੇ ਅੰਕ ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਦਿਸ਼ਾ ਦਿੱਤੀ ਗਈ ਹੈ。

ਚਰੋਮ ਐਂਜਲ ਫਾਰਫੈਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਚਰੋਮ ਐਂਜਲ ਫਾਰਫੈਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
4.0 9.0 3.6 4.0 10.1

ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਅਨੁਸੂਚਿਤ ਵਰਜਿਤ ਸਮਾਰਟਫੋਨ ਆਬਜੈਕਟ

Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ