హెచ్టిఎంఎల్ కాన్వాస్ గ్రేడియంట్

కాన్వాస్ - క్రమబద్ధమైన రంగులు

క్రమబద్ధమైన రంగులు నిష్కర్ష పరిధి, గోళాకారం, లేదా రేఖలు, పాఠం మొదలైన వాటిని పూరించవచ్చు. కాన్వాస్ పైని రూపాలు సరళ రంగులకు పరిమితమవుతాయి.

రెండు రకాల క్రమబద్ధమైన రంగులు ఉన్నాయి:

• createLinearGradient(x,y,x1,y1) - క్రమబద్ధమైన రంగులను సృష్టించండి
• createRadialGradient(x,y,r,x1,y1,r1) - రేఖారేఖలు/గోళాకార క్రమబద్ధమైన రంగులను సృష్టించండి

క్రమబద్ధమైన రంగుల వస్తువును పొందిన తర్వాత, రెండు లేదా మరిన్ని రంగుల సూచకాలను జోడించాలి.

addColorStop() పద్ధతి క్రమబద్ధమైన రంగుల ఆగమన పద్ధతిని మరియు క్రమబద్ధమైన రంగుల ప్రాంతాన్ని నిర్ణయిస్తుంది. క్రమబద్ధమైన రంగుల ప్రాంతం 0 నుండి 1 వరకు ఉండవచ్చు.

క్రమబద్ధమైన రంగులను ఉపయోగించడానికి, fillStyle లేదా strokeStyle అంశాన్ని క్రమబద్ధమైన రంగులగా మార్చండి మరియు రూపాలను (నిష్కర్ష పరిధి, పాఠం, లేదా రేఖలు) చేర్చండి.

createLinearGradient() ని ఉపయోగించండి

ఉదాహరణ

క్రమబద్ధమైన రంగులను సృష్టించండి. క్రమబద్ధమైన రంగులతో నిష్కర్ష పరిధిని పూరించండి:

జావాస్క్రిప్ట్:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// క్రమబద్ధమైన రంగులను సృష్టించండి
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// క్రమబద్ధమైన రంగులతో పూరించండి
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

亲自试一试

createRadialGradient() ని ఉపయోగించండి:

ఉదాహరణ

రేఖారేఖలు/గోళాకార క్రమబద్ధమైన రంగులను సృష్టించండి. క్రమబద్ధమైన రంగులతో నిష్కర్ష పరిధిని పూరించండి:

జావాస్క్రిప్ట్:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// క్రమబద్ధమైన రంగులను సృష్టించండి
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// క్రమబద్ధమైన రంగులతో పూరించండి
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册