HTML canvas transform() విధానం

HTML5 Canvas సంపూర్ణ పరిశీలన పుస్తకం

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

ప్రతి కాన్వెక్స్ ప్రతిమ ఒక ప్రస్తుత మార్పుదల మాట్రిక్స్ కలిగి ఉంటుంది.

transform() విధానం ప్రస్తుత మార్పుదల మాట్రిక్స్ ను పునఃనిర్మించుతుంది. ఇది క్రిందికి పేర్కొన్న మాట్రిక్స్ ద్వారా ప్రస్తుత మార్పుదల మాట్రిక్స్ ను కాపించి పనిచేస్తుంది:

a  c  e
b  d  f
0  0  1

లేదా మాటలో, transform() మీరు ప్రస్తుత పరిసరాన్ని పెంచడం, చుట్టిపెట్టడం, చేర్చడం మరియు పక్కన కరుస్తుంది.

ప్రకటన:ఈ మార్పుదల మాత్రమే transform() విధానం కి తర్వాత చిత్రీకరణను ప్రభావితం చేస్తుంది.

ప్రకటన:transform() విధానం ప్రవర్తన ముందస్తు మార్పుదల మాట్రిక్స్ పైన ఆధారపడి ఉంటుంది: rotate()మీదిscale()మీదిtranslate() లేదా transform() ద్వారా చేసిన మరొక మార్పుదల. ఉదాహరణకు: మీరు చిత్రాన్ని రెండుసార్లు పెంచినప్పుడు, transform() విధానం చిత్రాన్ని రెండుసార్లు పెంచుతుంది, మరియు మీ చిత్రం చివరికి నాలుగుసార్లు పెంచబడుతుంది.

సూచన:చూడండి: setTransform() మంథనం, ఇది ఇతర మార్పుదలకు సంబంధించిన చర్యలను జరిగించదు.

ఉదాహరణ

ఒక క్షేత్రాన్ని చిత్రీకరించండి; transform() విధానాన్ని ఉపయోగించి కొత్త మార్పుదల మాట్రిక్స్ ను జోడించండి, మరియు మరోసారి క్షేత్రాన్ని చిత్రీకరించండి; కొత్త మార్పుదల మాట్రిక్స్ ను జోడించండి, మరియు మరోసారి క్షేత్రాన్ని చిత్రీకరించండి. మీరు transform() ను పిలిచినప్పుడు, అది ముందస్తు మార్పుదల మాట్రిక్స్ పైన నిర్మిస్తుంది:

మీ బ్రౌజర్ HTML5 కాన్వెక్స్ టాగ్ ను మద్దతు చేయలేదు.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

ప్రయత్నించండి

వినియోగం

context.transform(a,b,c,d,e,f);

పారామీటర్ విలువలు

పారామీటర్స్ వివరణ
a అడుగుని చేర్చే వెలుతురు చిత్రణ
b అడుగుని చేర్చే వెలుతురు చిత్రణ
c అడుగుని చేర్చే వెలుతురు చిత్రణ
d అడుగుని చేర్చే వెలుతురు చిత్రణ
e అడుగుని చేర్చే వెలుతురు చిత్రణ
f అడుగుని చేర్చే వెలుతురు చిత్రణ

బ్రౌజర్ మద్దతు

ఈ పట్టికలో గింతలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ ను గుర్తించబడినవి.

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
4.0 9.0 3.6 4.0 10.1

ప్రకటన:Internet Explorer 8 మరియు ఆగాగ్రహం వరకు ఉన్న వెబ్ బ్రౌజర్లు <canvas> ఎలమెంట్ ను మద్దతు చేయలేదు.

HTML5 Canvas సంపూర్ణ పరిశీలన పుస్తకం