Canvas createLinearGradient() పద్ధతి

Canvas పరిచయం పుస్తకం

నిర్వచనం మరియు ఉపయోగం

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

ప్రకటనలు:Internet Explorer 8 మరియు అది ముంది సంస్కరణలు <canvas> మూలకం నమ్మకం చేయలేదు.

Canvas పరిచయం పుస్తకం