HTML కాన్వాస్ strokeStyle అత్యావసరికి
నిర్వచనం మరియు ఉపయోగం
strokeStyle పెంటిల్లో రంగు, గ్రేడియంట్ లేదా పేటర్న్ అత్యావసరికి అంగత్యాన్ని అందిస్తుంది.
ఇన్స్టాన్స్
ఉదాహరణ 1
ఒక రెక్టాంగలాన్ని చిత్రీకరించండి. నీలి పెంటిల్లో ఉపయోగించండి:
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
ఒక రెక్టాంగలాన్ని చిత్రీకరించండి. గ్రేడియంట్ పెంటిల్లో ఉపయోగించండి:
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" వచనాన్ని వ్రాయండి:
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> ఎలమెంట్ నిర్లక్ష్యం చేయబడలేదు.
