హెచ్ఎంఎల్ కాన్వాస్ క్రియేట్ లీనర్ గ్రేడియంట్() మెథడ్
నిర్వచనం మరియు ఉపయోగం
createLinearGradient() మెథడ్ ద్వారా లీనర్ గ్రేడియంట్ ఆబ్జెక్ట్ సృష్టించండి.
గ్రేడియంట్ క్వాడ్రేట్‌లు, స్క్వేర్లు, లైన్స్, టెక్స్ట్ మొదలైన వాటిని ఫిల్ల్ చేయడానికి ఉపయోగించబడవచ్చు.
సూచన:ఈ ఆబ్జెక్ట్‌ను ఉపయోగించండి strokeStyle లేదా fillStyle అటువంటి విలువలు.
సూచన:ఉపయోగించండి addColorStop() మెహోద్యం రంగులను నిర్వచించండి మరియు gradient ఆబ్జెక్ట్‌లో అదే స్థానంలో ఎక్కడ ఉన్నాయో.
ఇన్‌స్టాన్స్
మరింత చూడండి:
కాన్వాస్ నుండి రెడ్‌గా మరియు వెండిగా మారుతున్న గ్రేడియంట్‌ను నిర్వచించండి మరియు క్వాడ్రేట్‌ని ఫిల్ల్ స్టైల్‌గా వాడండి:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
సింథాక్స్
context.createLinearGradient(x0,y0,x1,y1);
పారామీటర్ విలువలు
| పారామీటర్స్ | వివరణ |
|---|---|
| x0 | గ్రేడియంట్ ప్రారంభ యొక్క x అక్షం |
| y0 | గ్రేడియంట్ ప్రారంభ యొక్క y అక్షం |
| x1 | గ్రేడియంట్ ముగింపు యొక్క x అక్షం |
| y1 | గ్రేడియంట్ ముగింపు యొక్క y అక్షం |
మరిన్ని ఇన్‌స్టాన్స్‌లు
ఇన్‌స్టాన్స్ 2
ఒక గ్రేడియంట్‌ను (పై నుండి క్రిందకు) నిర్వచించండి మరియు క్వాడ్రేట్‌ని ఫిల్ల్ స్టైల్‌గా వాడండి:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
ఇన్‌స్టాన్స్ 3
కాంటేజ్ నుండి రెడ్‌గా మరియు వెండిగా మారుతున్న గ్రేడియంట్‌ను నిర్వచించండి మరియు క్వాడ్రేట్‌ని ఫిల్ల్ స్టైల్‌గా వాడండి:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
బ్రౌజర్ మద్దతు
పట్టికలో అంకితమైన సంఖ్యలు ఈ అట్రిబ్యూట్ ను పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ను పేర్కొన్నాయి.
| చ్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఒపెరా |
|---|---|---|---|---|
| చ్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఒపెరా |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ప్రత్యామ్నాయంగా:ఇంటర్నెట్ ఎక్స్ప్లోరర్ 8 మరియు ఆందరికీ పైన వెర్షన్లు <canvas> ఎలిమెంట్ నిర్లక్ష్యం చేయబడలేదు.
